inter 키워드 ( Typescript )

inter 키워드

 

Typescript 에서 inter 키워드라는 게 있다.

이게 생각보다 명확하게 이해가 안가서 꽤나 오랫동안 살펴보기도 했다.

 

요지는 inter 키워드는 조건부 타입이라는 것이다. 아래 URL 에서 해당 내용에 대한 설명을 볼 수 있다.

 

https://typescript-kr.github.io/pages/advanced-types.html 

TypeScript 한글 문서

내용을 보면 

조건부 타입의 타입 추론 (Type inference in conditional types)

조건부 타입의 extends 절 안에서, 이제 추론 될 타입 변수를 도입하는 infer 선언을 가지는 것이 가능합니다.

이렇게 추론된 타입 변수는 조건부 타입의 실제 분기에서 참조될 수 있습니다.

같은 타입 변수에 대한 여러 개의 infer 위치를 가질 수 있습니다.

예를 들어, 다음은 함수 타입의 반환 타입을 추출합니다.

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;

조건부 타입은 순서대로 평가되는 일련의 패턴 일치를 형성하기 위해 중첩될 수 있습니다.

type Unpacked<T> =
    T extends (infer U)[] ? U :
    T extends (...args: any[]) => infer U ? U :
    T extends Promise<infer U> ? U :
    T;

type T0 = Unpacked<string>;  // string
type T1 = Unpacked<string[]>;  // string
type T2 = Unpacked<() => string>;  // string
type T3 = Unpacked<Promise<string>>;  // string
type T4 = Unpacked<Promise<string>[]>;  // Promise<string>
type T5 = Unpacked<Unpacked<Promise<string>[]>>;  // string

라고 한다.

이 글을 보고 나는 전혀 이해를 하지 못했다.

그냥 코드만 보고 그렇게 적용이 되는구나 하고만 생각하고 있었을 뿐.....

 

계속 살펴본 결과 어느정도는 이해 한 거 같아서

첫번째 예문인 아래 내용을 내 내름대로 해석해 보았다.

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;

 

먼저   

T   

-->  입력된 제네릭 T

 

extends    /     

-->   확장(상속)한다.

 

(...args: any[]) => 

--> any[] 타입  반환값이 있는 가변 함수를   

 

 infer R ?   

-->   앞서 선언했던 함수를 R 이라 하고 함수가 존재하면

 

R  :  any; 

--> R (함수) 사용 그렇지 않으면 any 사용   

 

입력된 제네릭 T 는 any[] 타입 반환값이 있는 가변 함수를  확장(상속)하는데 

앞절에서 선언된 any[] 타입  함수를 R 이라 하고 함수가 존재하면  R (함수) 그렇지 않으면 any 사용  한다는 뜻.

 

주절이 말이 길지만 더 간단히 말하자면

 

입력된 T 는 함수가 존재하면 함수를 사용. 그렇지 않음 any 사용한다.

 

 

두번째 예문도 한번 해석해 봤다.

type Unpacked<T> =
    T extends (infer U)[] ? U :
    T extends (...args: any[]) => infer U ? U :
    T extends Promise<infer U> ? U :
    T;

 

T extends (infer U)[] ? U :

--> 입력된 T 에  U타입 배열이 대입되면 U 사용 

 

T extends (...args: any[]) => infer U ? U :

--> 입력된 T 에 리턴타입 가변 함수가 대입되면 리턴타입 가변 함수 사용. 

T extends Promise<infer U> ? U :

--> 입력된 T 에 U 타입 Promise 가 대입되면 U타입 사용.

T;

--> 이것도 저것도 아님 그냥 입력된 대로 사용.

 

예문에 대한 결과는 아래에 있다.

 

type T0 = Unpacked<string>;  // string
type T1 = Unpacked<string[]>;  // string
type T2 = Unpacked<() => string>;  // string
type T3 = Unpacked<Promise<string>>;  // string
type T4 = Unpacked<Promise<string>[]>;  // Promise<string>
type T5 = Unpacked<Unpacked<Promise<string>[]>>;  // string​

 

글을 쓰다보니 나름 머리 속이 좀 더 정리가 된거 같다.