[TIL] 241020_Typescript: 조건부 타입

⚡️ 조건부 타입

조건부 타입은 extends 확장 키워드와 ? : 삼항 연산자를 이용하여 표현한다.

type A = number extends string ? string : number;
// number 타입은 string 타입의 서브 타입이 아니다.
// 조건이 거짓이므로 type A는 number이다.

이러한 조건부 타입은 제네릭과 함께 사용하면, 타입을 가변적으로 사용하면서도 논리의 흐름에 따른 타입 변경이 가능하다.

type StringNumberSwitch<T> = T extends number ? string : number;

let varA: StringNumberSwitch<number>; // string
let varB: StringNumberSwitch<string>; // number 

예를 들어 number는 string으로, string은 number로 바꿔주는 타입을 위와 같이 선언했다고 해보자.
varA는 타입 변수로 number를 받았으므로 조건이 참이 되어 string 타입으로 선언된다.

⚡️ 분산적 조건부 타입

분산적 조건부 타입은 타입 변수에 유니온 타입을 할당했을 때, 일반적인 조건부 타입과 다른 방식으로 동작하는 것을 말한다.
더 구체적으로 설명하기 위해 다음 코드를 살펴보자.

type StringNumberSwitch<T> = T extends number ? string : number;

let a: StringNumberSwitch<number | string>;
// = StringNumberSwitch<number> | StringNumberSwitch<string>
// = string | number

제네릭을 활용하여 타입을 선언하고, number와 string의 유니온 타입을 할당했을 때 변수 a의 타입이 결정되는 과정은 다음과 같다.

1. 먼저 제네릭 내부 타입들을 분배한 후 체크한다.
2. 이에 대한 유니온 타입으로 결정한다.

이와 같은 방식으로 위 코드에서 변수 a의 타입은 string | number 타입이 된다.

Reference

👩🏻‍🏫 한입 크기로 잘라 먹는 타입스크립트(TypeScript)
https://www.inflearn.com/course/한입-크기-타입스크립트