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> 是 false[] | true[]，而不是 boolean[]。另外，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 是某个东西的 promise，就把那个东西叫作 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。

速查表