타입 스크립트 - 제네릭의 조건부 타입과 infer

김영준·2023년 7월 29일
0

TIL

목록 보기
40/91
post-thumbnail

조건부 타입

삼항 연산자의 조건부로 타입을 지정하는 것


MyType의 타입이 string, number면 boolean, 아니면 never 타입을 반환한다.


아래 예제를 살펴보면 string과 number는 boolean | null에 속하지 않아 그대로 해당 타입을 가지고 bolean과 null은 속하니까 never가 된다.

따라서 U는 string | number 타입이 되고 a는 string | number 타입만 허용 가능하다.
이런 식으로 조건에 따라 타입을 지정하는 것을 조건부 타입이라고 한다.
또한 특정한 타입을 만들어서 필요한 경우에 활용하는 개념은 유틸리티 타입이라고 한다.

위 타입은 이미 타입 스크립트에서 Exclude라는 타입으로 내장되어 있다.


또 다른 예제를 살펴보자
아래 예제는 특정 객체의 속성의 타입이 맞는지 아닌지 확인해 주는 타입이다.
User 객체의 name 이라는 속성이 number 타입인지 확인하고있다.
keyof 키워드는 객체 타입의 속성들을 문자로 추출해서 union 타입으로 만든다.

User는 T, name은 U, string은 V로 각각 전달되는데 name이 T라는 객체 타입의 키에 해당하는지 제약 조건으로 확인하고 T[U]로 타입 인덱싱을 해보면 name의 속성을 알 수 있다. 그 속성이 number면 true, 아니면 false가 반환이 되고 결국 n이라는 변수는 false라는 boolean 데이터가 된다.


infer

타입 변수를 추론 할 수 있는지를 판단


아래 예제는 7번째 줄에서 typeof numbers를 제네릭으로 전달하고 있다.
typeof numbers는 number[] 타입이고 전달 된 number 타입을 (infer I)[] 와 비교한다. 형식이 같으므로 I는 number라고 추론할 수 있다. 따라서 추론이 가능하여 true이므로 추론한 I 타입, 즉 number를 반환한다. 따라서 a는 number 타입을 갖는다.


아래 예제는 함수의 두 번째 인자의 타입을 확인하는 유틸리티 타입이다.
현재 typeof hello(a: string, b: number) => void와 같다.
(a: string, b: string) => void(f: any, s: infer S) => any 와 비교하면 infer 자리에 number가 들어간다고 유추할 수 있다. 따라서 추론 가능하면 true이고, S 타입, 즉 number 타입을 반환한다.


아래 예제는 함수의 반환 타입을 확인하는 유틸리티 타입이다.
MyReturnType은 함수 타입이어야 한다는 제약 조건이 걸려있다.
typeof add(x: string, y: string) => string 이고 (...args: any) => infer R과 비교하면 R은 string이라고 추론할 수 있다. 따라서 true이므로 R, 즉 string을 반환한다.

이 타입은 ReturnType이라는 유틸리티 타입으로 내장되어있다.

profile
꾸준히 성장하는 개발자 블로그

0개의 댓글