유니언: 값에 허용된 타입을 두 개 이상의 가능한 타입으로 확장하는 것
내로잉: 값에 허용된 타입이 하나 이상의 가능한 타입이 되지 않도록 좁히는 것
애노테이션: 타입스크립트에서 변수에 타입을 지정하는 Syntax

Union

타입스크립트는 자바스크립트에 타입을 지정할 수 있게 해주는 판별기라고 할 수 있다.
그리고 타입스크립트는 자바스크립트의 동적 타입 지정을 한껏 사용하여 다양한 타입 지정 형태를 사용하게 만들 수도 있다.

이를테면 C언어 같은 경우는 변수를 선언할 때부터 어떤 형태의 값이 들어와야 하는지 미리 정해놓는다.
하지만 타입스크립트는 변수에 저장될 형식을 여러 개로 지정해줄 수 있다.

[타입스크립트 Union 예시]

let fruit: string | boolean | null;
fruit = 'Apple'; // OK
fruit = true; // OK

Union 은 해당 변수에 할당될 여지가 있는 타입을 기억해놓는다. 다음과 같은 예시로 확인해볼 수 있다.

[타입 할당 가능성]

// string | number 가 할당될 수 있는 상황
let fruit = Math.random() > 0.5
	? "strawberry" : 31

fruit.toUpperCase(); // Error

위의 예시 같은 경우는 타입스크립트에서 에러를 발생시켜줄 것이다. fruit이 string도 될 수 있고 number도 될 수 있는 상황에서 string타입에서만 사용할 수 있는 함수 toUpperCase()를 호출하고 있기 때문이다.

이 문제를 해결해주기 위해서 Narrowing을 사용할 수 있다.

Narrorwing

Narrowing 을 하는 방법은 3가지가 있다.

1. 값 할당을 통한 내로잉

let fruit: string | boolean;
fruit = 'Apple';

fruit.toUpperCase(); // OK

fruit = true; // OK

2. 조건 검사를 통한 내로잉

let fruit = Math.random() > 0.5
	? "strawberry" : 31

if (fruit === "strawberry"){
	fruit.toUpperCase(); // Ok
}

fruit.toUpperCase(); // Error

3. typeOf 검사를 통한 내로잉

let fruit = Math.random() > 0.5
	? "strawberry" : 31

if (typeof fruit === 'string'){
	fruit.toUpperCase(); // Ok
}

fruit.toUpperCase(); // Error

결론

Union 과 Narrowing을 적절히 사용하면 더 강력하게 TypeScript 타입지정을 이용할 수 있게된다.

참고

• 책 ⌜러닝 타입스크립트⌟ - 조시 골드버그