minstudio

고급 조건부 타입과 infer 키워드

타입스크립트의 꽃이라 불리는 조건부 타입(Conditional Types)T extends U ? X : Y 형태로 타입 레벨의 if문을 작성합니다.

여기에 infer 키워드를 더하면, 미지의 타입 내부 구조 중 내가 원하는 특정 부품(예: 배열 안의 요소 타입, 함수의 반환 타입)만 "갈고리"처럼 낚아채서(Extract) 사용할 수 있습니다.

🎣 infer 키워드의 타입 낚아채기 입력된 타입 (T) Promise<string> 조건부 추론 로직 T extends Promise<infer U> ? U : T 추출된 알맹이 (U) string
<!-- ==========================================
// 📂 ts-advanced/infer-types.ts
// ========================================== -->
<script>
// 1. Promise 안에 들어있는 알맹이 타입만 빼내는 커스텀 타입
// "T가 Promise 형태라면, 그 안의 타입을 U라고 부르고(infer) U를 반환해라. 아니면 그냥 T 반환"
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

type A = UnwrapPromise<Promise<string>>; // 결과: string
type B = UnwrapPromise<Promise<number[]>>; // 결과: number[]
type C = UnwrapPromise<boolean>; // 결과: boolean (Promise가 아니므로 그대로 반환)

// 2. 함수의 반환(Return) 타입만 쏙 빼내는 커스텀 타입
// TS 내장 유틸리티 ReturnType<T>의 실제 구현 원리입니다.
// "T가 함수 형태라면, 반환값을 R이라고 부르고(infer) R을 반환해라"
type MyReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

function getUserInfo() {
  return { id: 1, name: "Alice", isAdmin: true };
}

// 함수의 반환값을 미리 계산하여 타입으로 고정시킵니다!
type UserInfo = MyReturnType<typeof getUserInfo>;
/* 결과:
  type UserInfo = {
    id: number;
    name: string;
    isAdmin: boolean;
  }
*/
</script>
고급 조건부 타입과 infer 키워드 | Minstudio