TypeScript(타입스크립트) 리터럴 타입

리터럴 타입

리터럴 타입은 집합 타입의 보다 구체적인 하위 타입이다. 이것이 의미하는 것은 "Hello World" 는 string 이지만, string 은 "Hello World" 가 아니라는 것이다.

리터럴 타입 좁히기(Literal Narrowing)

var, let 으로 변수를 선언하면 이 변수의 값이 변경될 가능성이 있음을 컴파일러에게 알린다. 반면, const 를 사용해서 변수를 선언하면 값이 절대 변하지 않는다는 것을 컴파일러에게 알린다.

// const를 사용해서 변수가 절대 변경되지 않음을 보장한다.
const helloWorld = "Hello World";

// let은 변경될 수 있으므로 컴파일러는 문자열이라고 선언 할 것이다.
let helloWorkd = "Hello World";

문자열 리터럴 타입(String Literal Types)

문자열 리터럴 타입은 유니온 타입, 타입 가드 그리고 타입 별칭과 잘 결합된다. 이 기능들을 잘 사용하면 문자열로 enum과 비슷한 형태를 구현할 수 있다.

type = Easing = "ease-in" | "ease-out" | "ease-in-out";

class UIElement {
	animate(dx: number, dy: number, easing: Easing) {
    	if(easing === 'ease-in') { //... }
        else if(easing === 'ease-out') { //... }
        else if(easing === 'ease-in-out') { //... }
        else { //... } // 지정한 Easing 타입을 무시하면 이곳에 도달한다.
    }
}
          
let button = new UIElement();
button.animate(0, 0, "easy-in");
          
// 허용된 세 개의 문자열이 아닌 다른 문자열을 사용하면 오류가 발생한다.
button.animate(0, 0, "uneasy");

숫자형 리터럴 타입(Numeric Literal Types)

타입스크립트에는 문자열 리터럴과 같은 역할을 하는 숫자형 리터럴 타입도 존재한다. 주로 설정 값을 설정할 때 사용한다.

declare function setupMap(config: MapConfig): void;

interface MapConfig {
	lng: number;
  	lat: number;
  	tileSize: 8 | 16 | 32;
}

// tileSize에 설정한 8, 16, 32 이외의 다른 값이 들어오면 오류가 발생한다.
setupMap({ lng: -73, lat: 40, tileSize: 16 });

enum의 Tree-shaking 문제

타입스크립트 enum 타입을 사용하면 Tree-shaking이 되지 않는다. 이유는 enum 타입을 트랜스파일하면 즉시 실행 함수를 포함한 자바스크립트 코드로 변한다.

모듈 번들러는 보통 import 하고 사용하지 않는 코드는 최종 번들에서 제외시키는데, Rollup과 같은 모듈 번들러는 즉시 실행 함수를 사용하지 않는 코드로 판단하지 못하고 최종 번들에 포함시킨다.

따라서 트랜스파일을 진행했을 때 즉시 실행 함수로 변하지 않는 리터럴 타입과 Union Types을 사용하면 이점을 누릴 수 있다.