TypeScript 조건부 타입과 infer 사용법

조건부 타입은 JavaScript의 삼항 연산자처럼 읽히는 검사로 두 타입 중 하나를 고릅니다: T extends U ? X : Y. T가 U에 대입 가능하면 결과는 X, 그렇지 않으면 Y입니다.

type IsString<T> = T extends string ? "yes" : "no";

type A = IsString<"hello">; // "yes"
type B = IsString<42>;      // "no"

// A practical one: the type of a "message" property, if there is one
type MessageOf<T> = T extends { message: unknown } ? T["message"] : never;

type ErrText = MessageOf<{ message: string; code: number }>; // string
type Nothing = MessageOf<{ code: number }>;                  // never

const a: A = "yes";
const text: ErrText = "disk full";
console.log(a, text); // yes disk full

여기서 extends는 "대입 가능하다"는 뜻으로, 변수에 값을 대입할 때 컴파일러가 쓰는 것과 같은 관계입니다. 조건부 타입은 컴파일 시점에만 존재하며 JavaScript 출력에서 지워집니다.

문법

type Result = CheckedType extends TestType ? TrueType : FalseType;

조건부 타입은 검사하는 타입이 나중에 구체적인 타입을 받는 타입 매개변수인 제네릭과 함께일 때 쓸모가 있습니다. true 분기에서 TypeScript는 검사한 타입이 조건에 맞는다는 것을 알므로, 평범한 T에는 message 속성이 없는데도 위의 T["message"]가 허용됩니다.

이어지는 삼항 연산자처럼 중첩할 수도 있습니다.

type TypeName<T> =
  T extends string ? "string" :
  T extends number ? "number" :
  T extends boolean ? "boolean" :
  T extends undefined ? "undefined" :
  "object";

function typeName<T>(value: T): TypeName<T> {
  return typeof value as TypeName<T>;
}

console.log(typeName("hi"), typeName(3), typeName(true)); // string number boolean
const n: TypeName<number[]> = "object";
console.log(n); // object

함수 본문의 as TypeName<T>는 선택 사항이 아닙니다. 다음 절에서 그 이유를 보여 줍니다.

조건부 반환 타입에는 단언이 필요하다

반환 타입이 자신의 타입 매개변수에 대한 조건부 타입인 함수는 어느 분기도 바로 반환할 수 없습니다. TypeScript는 본문 안에서 T를 좁히지 않으므로 어느 분기가 적용되는지 알 수 없습니다.

// This does not compile: TypeScript cannot pick a branch of Flip<T> inside the body
type Flip<T> = T extends string ? number : string;

function flip<T extends string | number>(x: T): Flip<T> {
  return typeof x === "string" ? x.length : String(x);
}

console.log(flip("abc"), flip(7));

index.ts(5,34): error TS2322: Type 'number' is not assignable to type 'Flip<T>'.
index.ts(5,45): error TS2322: Type 'string' is not assignable to type 'Flip<T>'.

흔한 해결책은 두 가지입니다. 입력과 출력의 쌍을 각각 밝히고 호출하는 쪽을 정확히 검사하는 오버로드, 또는 구현 안의 단언입니다.

// Fix 1: overloads
function flip(x: string): number;
function flip(x: number): string;
function flip(x: string | number): string | number {
  return typeof x === "string" ? x.length : String(x);
}

const len = flip("abc"); // number
const str = flip(7);     // string
console.log(len + 1, str.padStart(3, "0")); // 4 007

// Fix 2: keep the conditional type and assert inside the body
type Flip<T> = T extends string ? number : string;
function flip2<T extends string | number>(x: T): Flip<T> {
  return (typeof x === "string" ? x.length : String(x)) as Flip<T>;
}
console.log(flip2("hello")); // 5

오버로드는 함수 오버로딩 페이지에서 다룹니다. 단언을 쓰면 컴파일러가 여러분을 믿으므로, 본문에서 잘못된 분기를 반환해도 잡히지 않습니다.

분배 조건부 타입

검사하는 타입이 맨 타입 매개변수이고 유니언을 받으면, 조건이 멤버마다 한 번씩 실행되고 결과가 새 유니언으로 합쳐집니다.

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

type A = ToArray<string | number>; // string[] | number[]

// Wrapping both sides in [ ] turns distribution off
type ToArrayWhole<T> = [T] extends [unknown] ? T[] : never;
type B = ToArrayWhole<string | number>; // (string | number)[]

const a: A = ["x", "y"];  // an array of strings, or an array of numbers
const b: B = ["x", 1];    // a mixed array
// const bad: A = ["x", 1] would be error TS2322:
// Type '(string | number)[]' is not assignable to type 'string[] | number[]'.
console.log(a, b); // [ 'x', 'y' ] [ 'x', 1 ]

분배가 Exclude와 Extract를 동작하게 합니다. Exclude<T, U>는 T extends U ? never : T로 정의됩니다. U에 맞는 멤버는 never가 되고, never는 유니언에서 사라집니다. 그래서 Exclude<"a" | "b" | "c", "a">는 "b" | "c"입니다.

같은 규칙에서 두 가지 의외의 결과가 나옵니다. boolean은 유니언 true | false이므로 ToArray<boolean>은 boolean[]이 아니라 false[] | true[]입니다. 그리고 never는 빈 유니언이므로, 분배 조건부 타입에 never를 주면 아무것도 검사하지 않고 never를 반환합니다.

type IsNever<T> = T extends never ? true : false;
type X = IsNever<never>; // never, not true

type IsNeverFixed<T> = [T] extends [never] ? true : false;
type Y = IsNeverFixed<never>; // true

infer로 타입 추출하기

infer는 extends 절 안에서 새 타입 변수를 선언합니다. 매칭에 성공하면 TypeScript가 검사한 타입에서 그 변수를 채우고, true 분기에서 그것을 쓸 수 있습니다.

type ElementOf<T> = T extends readonly (infer E)[] ? E : T;
type Unpromise<T> = T extends Promise<infer V> ? V : T;
type FirstArg<F> = F extends (first: infer A, ...rest: any[]) => unknown ? A : never;
type Head<T> = T extends [infer H, ...unknown[]] ? H : never;

type E1 = ElementOf<string[]>;              // string
type V1 = Unpromise<Promise<{ id: number }>>; // { id: number }
type A1 = FirstArg<(name: string, age: number) => void>; // string
type H1 = Head<[Date, number]>;              // Date

const id: V1 = { id: 7 };
const first: A1 = "Ada";
const when: H1 = new Date("2024-03-15T10:30:00Z");
console.log(id, first, when.toISOString());
// { id: 7 } Ada 2024-03-15T10:30:00.000Z

T extends Promise<infer V> ? V : T는 "T가 무언가의 프로미스라면 그 무언가를 V라고 부르고 반환하고, 아니면 T를 그대로 반환하라"로 읽으세요. infer는 조건부 타입의 extends 절에서만 허용됩니다.

infer 변수는 extends로 자체 제약을 가질 수 있습니다. 그러면 추론된 타입이 맞을 때만 매칭에 성공합니다.

type FirstString<T> = T extends [infer S extends string, ...unknown[]] ? S : never;

type A = FirstString<["a", 1]>; // "a"
type B = FirstString<[1, "a"]>; // never: the first element is not a string

ReturnType 직접 만들기

내장 ReturnType은 infer를 쓰는 한 줄짜리 조건부 타입입니다. 직접 작성해 보는 것은 두 개념을 모두 이해하게 해 주는 고전적인 연습입니다.

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

function makeUser(name: string) {
  return { name, joined: new Date("2024-03-15T10:30:00Z") };
}

type User = MyReturnType<typeof makeUser>; // { name: string; joined: Date }
type Same = ReturnType<typeof makeUser>;   // the built-in gives the same type

const u: User = makeUser("Ada");
const copy: Same = { ...u, name: "Grace" };
console.log(copy.name, copy.joined.getUTCFullYear()); // Grace 2024

typeof makeUser가 함수 값을 타입으로 바꾸고, 조건부 타입이 그것을 "아무 함수"와 매칭해서 반환 타입을 R로 잡아냅니다. 표준 라이브러리 버전은 두 가지 세부 사항이 다릅니다. 매개변수가 함수 타입으로 제약되어 있어서(T extends (...args: any) => any) ReturnType<string>은 never가 아니라 컴파일 오류이고, false 분기는 any입니다. ReturnType 페이지에서 Parameters, InstanceType, Awaited도 다룹니다.

재귀 조건부 타입

조건부 타입은 자기 자신을 참조할 수 있으므로, 어떤 깊이의 중첩이든 풀 수 있습니다.

type Flatten<T> = T extends readonly (infer U)[] ? Flatten<U> : T;

type A = Flatten<number[][][]>; // number
type B = Flatten<string>;       // string

내장 Awaited<T>가 이렇게 동작해서 Promise<Promise<T>>를 T까지 풉니다. 실제로는 재귀를 얕게 유지하세요. 매우 깊거나 끝없는 재귀는 컴파일러가 error TS2589: Type instantiation is excessively deep and possibly infinite로 포기하게 만듭니다.

빠른 참조