Table of contents

3.0. Introduction

padLeft 라는 함수가 있다고 해보자.

-narrowing-padLeft.ts-

function padLeft(padding: number | string, input: string): string {
	throw new Error('Not implemented yet!');
}

만약 padding 이 number 타입이면 input 앞에 추가하려 하는 스페이스의 개수로 다룰 것이다. 한편 string 타입이라면 input 에 padding 값을 적용하려는 것으로 간주할 것이다. 이제 padLeft 가 padding 의 타입으로 number 값을 전달했을 때의 로직을 구현해보자.

-narrowing-padLeft.ts-

function padLeft(padding: number | string, input: string): string {
	**return new Array(padding + 1).join(' ') + input;**
	// Operator '+' cannot be applied to types 'string | number' and 'number'.
}

padding + 1 에 대해 에러가 발생한 것을 볼 수 있다. 타입스크립트는 number | string 타입이 들어갈 자리에 number 타입의 변수에만 적용 가능한 연산이 있다는 것을 경고하고 있는 것이다. 다시 말해, padding 이 number 타입임을 명시적으로 작성하지 않으면, padding 이 string 타입일 때를 처리할 수 없으므로, 이러한 에러가 발생되는 것이다. 이러한 맥락에서 코드를 수정해보자.

-narrowing-padLeft.ts-

function padLeft(padding: number | string, input: string)/* : string */{
	**if (typeof padding === 'number') {**
		return new Array(padding + 1).join(' ') + input;
	**}**
	return padding + input;
}

이러한 내로잉 코드가 재미없는 자바스크립트 코드처럼 느껴진다면, 좋은 지적이다. 코드에서 작성한 타입 주석을 제외한다면, 이 타입스크립트 코드는 마치 순수 자바스크립트 코드와 같이 느껴진다.

타입스크립트의 타입 시스템은 타입에 대한 안정성을 얻기 위해, 왜곡하지 않는 일반적인 자바스크립트 코드를 가능한 한 쉽게 작성할 수 있도록 하는 것을 목표로 한다.

이러한 내로잉에 대해 그리 많은 내용이 필요한가 싶지만, 생각보다 많은 내용을 다뤄야 한다. 그 내용이란 타입스크립트가 정적 타입을 사용하여 어떻게 런타임 값을 분석하는가에 대한 것이다. 즉, if/else , 삼항연산자, 반복문, 참,거짓 체크 등등과 같은 자바스크립트 런타임 흐름 제어 구조체 위에서 오버레이 방식으로 타입을 분석하는 것에 대해 다룰 것이다.

if 조건문 내에서, 타입스크립트가 typeof padding === 'number' 를 트랜스파일할 때, 이를 타입 가드(type guard) 라고 불리는 특별한 형태의 코드로 이해하여 처리한다.

타입스크립트는 주어진 위치에서 가능한 가장 구체적인 타입을 분석하기 위해, 프로그램의 실행 경로를 추적하여 따라간다.