조건부 타입 — T extends U ? X : Y

유틸리티 타입(11편) 들이 어떻게 만들어졌나 들여다보면 거의 모두 조건부 타입이 기반입니다. 자바스크립트의 삼항 연산자(x ? a : b) 와 같은 모양 — 다만 타입 레벨에서 동작합니다. 12편은 조건부 타입과 그 동반자 infer·분배 조건부 타입까지.

기본형 — T extends U ? X : Y

type IsString<T> = T extends string ? true : false;

type A = IsString<"hello">;    // true
type B = IsString<42>;          // false
type C = IsString<string>;      // true

// 실용 예 — null/undefined 제거 (NonNullable 의 정의)
type MyNonNullable<T> = T extends null | undefined ? never : T;

infer — 매치된 일부를 변수로 캡처

// 함수의 반환 타입만 뽑기 (ReturnType 의 정의)
type MyReturnType<F> = F extends (...args: any) => infer R ? R : never;

type R1 = MyReturnType<() => number>;          // number
type R2 = MyReturnType<(x: string) => User>;   // User

// Promise 안 풀기 (Awaited 의 핵심)
type Unwrap<T> = T extends Promise<infer V> ? V : T;
type V = Unwrap<Promise<number>>;               // number

// 배열의 원소 타입
type ElementOf<T> = T extends (infer E)[] ? E : never;
type E = ElementOf<User[]>;                    // User

infer 는 "타입 매칭하면서 일부를 변수에 담아두기". 정규식의 캡처 그룹과 닮았습니다.

분배 조건부 타입 — 유니온이 자동 분기

type ToArray<T> = T extends any ? T[] : never;

type X = ToArray<string | number>;
// 의외: string[] | number[]   ← 유니온 각 멤버에 자동 분배
// 직관: (string | number)[]   ← 아님!

// 왜? 유니온 + 조건부 = 자동 분배 (벗기지 않게 하려면 [] 로 감싸기)
type ToArrayNo<T> = [T] extends [any] ? T[] : never;
type Y = ToArrayNo<string | number>;   // (string | number)[]

Exclude · Extract — 분배의 응용

// 유틸리티 타입의 실제 정의 (단순)
type MyExclude<T, U> = T extends U ? never : T;
type MyExtract<T, U> = T extends U ? T : never;

// 동작 (분배 덕분)
type A = MyExclude<"a" | "b" | "c", "b">;
// = ("a" extends "b" ? never : "a")    → "a"
// | ("b" extends "b" ? never : "b")    → never
// | ("c" extends "b" ? never : "c")    → "c"
// = "a" | "c"

실전 — API 응답 타입 안전하게 풀기

type ApiResponse<T> =
  | { ok: true; data: T }
  | { ok: false; error: string };

// 성공만 골라 data 타입 뽑기
type SuccessData<R> = R extends { ok: true; data: infer D } ? D : never;

type UserResp = ApiResponse<{ id: number; name: string }>;
type UserData = SuccessData<UserResp>;
// = { id: number; name: string }

literal 좁히기 + 조건부

// 입력 타입에 따라 반환 타입이 달라지는 함수
function format<T extends number | string>(x: T): T extends number ? string : number {
  return (typeof x === "number" ? String(x) : Number(x)) as any;
}

const a = format(10);       // string
const b = format("10");     // number

이게 overload(3편) 의 더 강력한 대안. 입력-출력 관계를 한 줄로 표현.

실전 자주 만나는 조건부 타입 패턴