Typescript Infer 2편 : 활용(기초)

프디·2025년 4월 13일

Typescript infer

목록 보기
2/5

1. 배열 요소 타입 추출하기 - ElementType<T>

type ElementType<T> = T extends (infer U)[] ? U : never;

type A = ElementType<string[]>;   // string
type B = ElementType<number[]>;   // number
type C = ElementType<boolean[]>;  // boolean
type D = ElementType<null>;       // never
  • 배열 타입인지 검사한 뒤, 요소 타입을 U로 추론해 리턴한다.
  • 배열이 아니면 never.

2. 함수의 반환 타입 추출 - MyReturnType<T>

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

function getUser() {
  return { id: 1, name: 'Alice' };
}

type R = MyReturnType<typeof getUser>;  
// { id: number, name: string }
  • 함수의 리턴 타입을 추출하고 싶을 때 사용.
  • ReturnType<T> 유틸리티를 직접 만든 것과 같다.

3. 함수의 첫 번째 매개변수 타입 추출 - FirstArg<T>

type FirstArg<T> = T extends (arg: infer A, ...args: any[]) => any ? A : never;

type A = FirstArg<(x: number, y: string) => void>;  // number
type B = FirstArg<(s: string) => boolean>;          // string
type C = FirstArg<() => void>;                      // never
  • 함수의 첫 번째 매개변수 타입을 추출하는 유틸리티 타입.

4. 전체 매개변수 리스트 추출 - MyParameters<T>

type MyParameters<T> = T extends (...args: infer P) => any ? P : never;

type P1 = MyParameters<(x: number, y: string) => void>;  
// [number, string]

type P2 = MyParameters<() => void>;  
// []
  • Parameters<T>의 직접 구현 버전.
  • 인자들을 배열로 그대로 추출할 수 있다.

5. Promise 내부 타입 추출 - MyAwaited<T>

type MyAwaited<T> = T extends Promise<infer U> ? U : T;

type A = MyAwaited<Promise<number>>;     // number
type B = MyAwaited<Promise<string>>;     // string
type C = MyAwaited<string>;              // string (Promise 아님 → 그대로 반환)
  • Promise 안에 들어있는 실제 결과 타입을 뽑고 싶을 때.
  • Awaited<T>를 직접 구현한 것.

6. 튜플에서 첫 번째 요소 타입 추출 - First<T>

type First<T> = T extends [infer F, ...any[]] ? F : never;

type A = First<[number, string, boolean]>;  // number
type B = First<[]>;                         // never
  • 튜플의 첫 번째 요소만 꺼내고 싶을 때.
  • infer는 배열 분해([infer A, ...rest])와 잘 어울린다.

마무리 요약

유틸리티 이름기능
ElementType<T>배열의 요소 타입 추출
MyReturnType<T>함수의 반환 타입 추출
FirstArg<T>첫 번째 매개변수 타입 추출
MyParameters<T>모든 매개변수 리스트 추출
MyAwaited<T>Promise 내부 타입 추출
First<T>튜플의 첫 요소 타입 추출
profile
프론트엔드개발자인디

0개의 댓글