[TS] TypeScript 타입스크립트 Infer 키워드 활용하기

타입스크립트 infer는 타입을 추론하는데 사용하는 키워드다. 배열 요소 타입, 함수 파라미터 타입, 함수 반환 타입 등 특정 문맥의 타입 추출이 필요할 때 infer를 활용할 수 있다.

기본 문법 : T extends infer U ? U : T — U가 추론 가능한 타입이면 U 리턴, 아니면 T 리턴

 

infer는 타입 구현 영역(할당 연산자 우측)의 조건부 타입(extends 절)에서만 사용할 수 있으며, TS 엔진이 타입을 추론하고 변수(제네릭 타입)에 할당한다. 할당된 변수는 조건부 타입의 true 분기에서만 사용할 수 있다.

// Error! 'infer' declarations are only permitted in the 'extends' clause of a conditional type.(ts1338)
type Wrong1<T extends (infer U)[]> = T[0]; // 제약 조건 extends에 사용해서 에러
type Wrong2<T> = (infer U)[] extends T ? U : T; // extends 조건절 사용하지 않아서 에러

// Error! Cannot find name 'U'.(ts2304)
type Wrong3<T> = T extends (infer U)[] ? T : U; // false 분기에 사용해서 에러

 

UnpackedArray

---

배열 요소 타입 추출

 

T가 배열이고, 배열 요소의 타입을 추론할 수 있으면 U(제네릭 타입) 변수에 할당한다. ▼

type UnpackedArray<T> = T extends (infer U)[] ? U : T;
type T0 = string[];
type U0 = UnpackedArray<T0>; // string

 

UnpackedArray 유틸리티 타입 실행 흐름 via Bytefer

 

UnpackedFn

---

함수 반환 타입 추출

 

T가 함수이고, 함수의 반환 타입을 추론할 수 있으면 변수(제네릭 타입) U에 할당한다. ▼

type UnpackedFn<T> = T extends (...args: unknown[]) => infer U ? U : T;
type T1 = () => string;
type U1 = UnpackedFn<T1>; // string

 

함수를 오버로드했다면 마지막 호출 시그니처를 타입 추론에 사용한다. 참고로 시그니처(Signiture)는 함수나 메서드의 입력(파라미터)과 출력(반환값)에 대한 타입 정보를 의미한다.

declare function foo(x: string): number;
declare function foo(x: number): string;
declare function foo(x: string | number): string | number;

type U2 = UnpackedFn<typeof foo>; // string | number

 

함수를 오버로드 했을 때 시그니처 via Bytefer

 

Unpacked

---

배열 요소 타입 / 함수 반환 타입 / 프로미스 결과 타입 추출

 

T가 배열 | 함수 | 프로미스가 아니면 T를 그대로 반환한다. ▼

type Unpacked<T> =
    T extends (infer U)[] ? U :
    T extends (...args: any[]) => infer U ? U :
    T extends Promise<infer U> ? U :
    T; // 전달받은 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

 

PropertyType

---

객체 키 타입 추출

 

T가 객체이고, 객체 키 타입을 추론할 수 있으면 변수(제네릭 타입) U, R에 할당한다. ▼

type User = { id: number; name: string };

type PropertyType<T> = T extends { id: infer U; name: infer R } ? [U, R] : T;
type U3 = PropertyType<User>; // [number, string]

 

만약 제네릭 타입 U를 1개만 선언하면 유니온 타입을 반환한다. 공변 위치(함수 파라미터를 제외한 곳)에서 동일한 타입 변수(U)에 대한 후보가 여러개면 최종 타입을 유니온 타입으로 유추하기 때문이다.

type PropertyType<T> = T extends { id: infer U; name: infer U } ? U : T;
type U4 = PropertyType<User>; // string | number

 

반면, 반공변 위치(함수 파라미터)에서 동일한 타입 변수(U)에 대한 후보가 여러개면 최종 타입을 인터섹션 타입으로 유추한다. 때문에 아래 예시에서 U는 string & number 타입이 된다. 하지만 제네릭으로 넘긴 두 메서드의 x 파라미터 타입과 다르기 때문에 false 분기를 타서 never를 반환한다. (T extends U ? X : Y 조건부 타입 문법에서 T를 U에 할당할 수 있으면 true 분기를, 할당할 수 없으면 false 분기를 탄다)

type Bar<T> = T extends { a: (x: infer U) => void; b: (x: infer U) => void }
  ? U
  : never;
  
type U5 = Bar<{ a: (x: string) => void; b: (x: number) => void }>; // never

더 자세한 내용은 타입스크립트의 공변성 / 반공변성 / 이변성 포스팅 참고

 

• 공변성 : 슈퍼 타입(넓은 타입)이 서브 타입(좁은 타입)을 커버하는 관계
  • 서브 타입을 슈퍼 타입에 대입할 수 있음 e.g. superType = subType
  • 타입스크립트 기본 동작
• 반공변성 : 서브 타입(좁은 타입)이 슈퍼 타입(넓은 타입)을 커버하는 관계 
  
  • 슈퍼 타입을 서브 타입에 대입할 수 있음 e.g. subType = superType
  • 함수 파라미터 동작
• 이변성 : 공변성과 반공변성을 모두 포함하는 관계 
  
  • 슈퍼 타입과 서브 타입을 모두 대입할 수 있음
  • strictFunctionTypes 옵션을 껐을 때 함수 파라미터 동작

 

FirstIfString

---

배열의 첫번째 요소가 문자열 타입이면 추출

 

아래 예시의 첫번째 조건부 타입에선 제네릭으로 받은 T가 배열인지 확인하고, 배열의 첫번째 요소를 타입 변수 S에 할당한다. 두번째 조건부 타입에선 할당된 타입 변수 S가 문자열인지 확인하고 참이면 S를 반환한다.

type FirstIfString<T> = T extends [infer S, ...unknown[]] // 첫번째 조건부 타입
  ? S extends string // 두번째 조건부 타입
    ? S
    : never
  : never;

type A = FirstIfString<[string, number, number]>; // string
type B = FirstIfString<['a', number, number]>; // 'a'
type C = FirstIfString<['a | b', number]>; // 'a' | 'b'

 

타입스크립트 4.7 버전부터 infer 타입에 extends 절을 사용해서 제약 조건을 추가할 수 있다. 위 예시에선 2개의 조건부 타입을 사용했는데, 이 기능을 사용하면 1개의 조건부 타입만 사용해서 작성할 수 있다.

// infer와 extends를 사용해서 타입 변수 S를 문자열 타입으로 제한하고 있다
type FirstIfString<T> = T extends [infer S extends string, ...unknown[]]
  ? S
  : never;

 

UnionToIntersection

---

유니온 타입을 받아 인터섹션 타입으로 추출

 

U 타입 각 멤버의 함수 타입을 생성하고, 각 함수 타입의 파라미터를 추론하여 인터섹션 타입을 생성하는 예시. ▼

type UnionToIntersection<U> = (
  U extends any ? (arg: U) => void : never // 첫번째 조건부 타입
) extends (arg: infer R) => void // 두번째 조건부 타입
  ? R
  : never;

type T6 = { a: 'a' } | { b: 'b' };
type T7 = UnionToIntersection<T6>; // { a: 'a' } & { b: 'b' }

 

1. 첫번째 조건부 타입 : U extends any ? (arg: U) => void : never
   • 타입 변수 U가 어떤 타입이든 상관없이 (arg: U) => void 타입으로 확장
   • 타입 변수 U의 각 멤버에 대해 (arg: U) => void 타입을 가진 유니온 반환
     (arg: { a: "a" }) => void | (arg: { b: "b" }) => void
2. 두번째 조건부 타입 : (...) extends (arg: infer R) => void ? R : never
   • 함수 파라미터 타입 R 추론
   • 반공변 위치에서 타입 변수(R)의 후보가 여러개이므로 인터섹션 타입 반환

 

레퍼런스

---

Using TypeScript infer Like a Pro

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요