TypeScript 类型体操实战：从 infer 到递归类型的高级技巧#

TypeScript 的类型系统是图灵完备的——这意味着你可以在类型层面做几乎任何计算。这听起来很学术，但实际上，掌握高级类型技巧能让你写出更安全、更具表达力的代码。本文将从条件类型出发，逐步深入 infer、模板字面量类型、递归类型和类型分发，最终带你手写一系列实用的工具类型。

一、条件类型：类型系统的 if-else#

条件类型是一切高级类型技巧的基石。语法很简单：

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

3
type A = IsString<'hello'>; // true
4
type B = IsString<42>;      // false

T extends U ? X : Y 的本质是：如果 T 可以赋值给 U，则结果为 X，否则为 Y。

1.1 条件类型的分发特性#

当条件类型作用于联合类型时，会自动分发（distribute）：

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

3
type Result = ToArray<string | number>;
4
// 等价于 ToArray<string> | ToArray<number>
5
// 即 string[] | number[]

注意，这里得到的是 string[] | number[]，而不是 (string | number)[]。如果你想要后者，需要用方括号包裹来阻止分发：

1
type ToArrayNonDist<T> = [T] extends [any] ? T[] : never;
2

3
type Result2 = ToArrayNonDist<string | number>;
4
// (string | number)[]

1.2 利用分发实现类型过滤#

分发特性可以用来从联合类型中过滤出特定类型：

1
type ExtractString<T> = T extends string ? T : never;
2

3
type Filtered = ExtractString<'a' | 1 | 'b' | true>;
4
// 'a' | 'b'

这就是内置 Extract 和 Exclude 的原理：

1
// 内置实现
2
type Extract<T, U> = T extends U ? T : never;
3
type Exclude<T, U> = T extends U ? never : T;
4

5
type OnlyNumbers = Extract<string | number | boolean, number>;
6
// number
7

8
type WithoutString = Exclude<string | number | boolean, string>;
9
// number | boolean

二、infer 关键字：类型层面的模式匹配#

infer 是条件类型中最强大的武器。它允许你在 extends 子句中声明一个待推断的类型变量。

2.1 基础用法：提取函数返回类型#

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

3
type Fn = (x: number, y: string) => boolean;
4
type R = MyReturnType<Fn>; // boolean

infer R 的意思是：如果 T 能匹配函数签名，就把返回值类型”捕获”到 R 中。

2.2 提取函数参数类型#

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

3
type Params = MyParameters<(a: number, b: string) => void>;
4
// [a: number, b: string]

2.3 提取 Promise 内部类型#

1
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
2

3
type A = UnwrapPromise<Promise<string>>;  // string
4
type B = UnwrapPromise<number>;           // number

2.4 提取数组元素类型#

1
type ElementOf<T> = T extends (infer E)[] ? E : never;
2

3
type El = ElementOf<string[]>;         // string
4
type El2 = ElementOf<[1, 'a', true]>;  // 1 | 'a' | true

2.5 infer 在元组中的妙用#

提取元组的第一个和剩余元素：

1
type First<T extends any[]> = T extends [infer F, ...any[]] ? F : never;
2
type Rest<T extends any[]> = T extends [any, ...infer R] ? R : never;
3
type Last<T extends any[]> = T extends [...any[], infer L] ? L : never;
4

5
type F = First<[1, 2, 3]>; // 1
6
type R = Rest<[1, 2, 3]>;  // [2, 3]
7
type L = Last<[1, 2, 3]>;  // 3

三、模板字面量类型：字符串级别的类型运算#

TypeScript 4.1 引入的模板字面量类型，让你可以在类型层面做字符串操作。

3.1 基础拼接#

1
type Greeting<T extends string> = `Hello, ${T}!`;
2

3
type G = Greeting<'World'>; // "Hello, World!"

3.2 结合联合类型生成排列组合#

1
type Color = 'red' | 'blue' | 'green';
2
type Size = 'sm' | 'md' | 'lg';
3

4
type ClassName = `${Color}-${Size}`;
5
// "red-sm" | "red-md" | "red-lg" | "blue-sm" | "blue-md" | "blue-lg" | "green-sm" | "green-md" | "green-lg"

3.3 结合 infer 做字符串模式匹配#

1
// 提取路由参数
2
type ExtractParams<T extends string> =
3
  T extends `${string}:${infer Param}/${infer Rest}`
4
    ? Param | ExtractParams<Rest>
5
    : T extends `${string}:${infer Param}`
6
      ? Param
7
      : never;
8

9
type Params = ExtractParams<'/api/:version/users/:id/posts/:postId'>;
10
// "version" | "id" | "postId"

3.4 实现 CamelCase 转换#

1
type CamelCase<S extends string> =
2
  S extends `${infer Head}-${infer Tail}`
3
    ? `${Head}${CamelCase<Capitalize<Tail>>}`
4
    : S;
5

6
type Camel = CamelCase<'hello-world-foo-bar'>;
7
// "helloWorldFooBar"

3.5 内置字符串工具类型#

TypeScript 内置了四个字符串操作类型：

1
type A = Uppercase<'hello'>;    // "HELLO"
2
type B = Lowercase<'HELLO'>;    // "hello"
3
type C = Capitalize<'hello'>;   // "Hello"
4
type D = Uncapitalize<'Hello'>; // "hello"

四、递归类型：类型系统中的循环#

递归类型让你可以处理任意深度的嵌套结构。

4.1 深度 Readonly#

内置的 Readonly 只处理一层，我们来实现深度版本：

1
type DeepReadonly<T> = T extends Function
2
  ? T
3
  : T extends object
4
    ? { readonly [K in keyof T]: DeepReadonly<T[K]> }
5
    : T;
6

7
interface Nested {
8
  a: {
9
    b: {
10
      c: string;
11
      d: number[];
12
    };
13
  };
14
  fn: () => void;
15
}
16

17
type ReadonlyNested = DeepReadonly<Nested>;
18
// {
19
//   readonly a: {
20
//     readonly b: {
21
//       readonly c: string;
22
//       readonly d: readonly number[];
23
//     };
24
//   };
25
//   readonly fn: () => void;
26
// }

4.2 深度 Partial#

1
type DeepPartial<T> = T extends Function
2
  ? T
3
  : T extends object
4
    ? { [K in keyof T]?: DeepPartial<T[K]> }
5
    : T;
6

7
interface Config {
8
  server: {
9
    host: string;
10
    port: number;
11
    ssl: {
12
      cert: string;
13
      key: string;
14
    };
15
  };
16
  debug: boolean;
17
}
18

19
type PartialConfig = DeepPartial<Config>;
20
// 所有层级的属性都变为可选

4.3 递归展平元组#

1
type Flatten<T extends any[]> =
2
  T extends [infer First, ...infer Rest]
3
    ? First extends any[]
4
      ? [...Flatten<First>, ...Flatten<Rest>]
5
      : [First, ...Flatten<Rest>]
6
    : [];
7

8
type Flat = Flatten<[1, [2, [3, 4]], [5]]>;
9
// [1, 2, 3, 4, 5]

4.4 递归实现 Awaited（深度解包 Promise）#

1
type DeepAwaited<T> =
2
  T extends Promise<infer U>
3
    ? DeepAwaited<U>
4
    : T;
5

6
type A = DeepAwaited<Promise<Promise<Promise<string>>>>;
7
// string

这就是 TypeScript 内置 Awaited 类型的核心原理。

4.5 类型层面的数字运算#

利用元组长度可以实现类型级别的加法：

1
type BuildTuple<N extends number, T extends any[] = []> =
2
  T['length'] extends N ? T : BuildTuple<N, [...T, any]>;
3

4
type Add<A extends number, B extends number> =
5
  [...BuildTuple<A>, ...BuildTuple<B>]['length'];
6

7
type Sum = Add<3, 4>; // 7
8

9
type Subtract<A extends number, B extends number> =
10
  BuildTuple<A> extends [...BuildTuple<B>, ...infer Rest]
11
    ? Rest['length']
12
    : never;
13

14
type Diff = Subtract<10, 3>; // 7

五、实战工具类型#

掌握了上面的基础之后，来实现一些实际开发中有用的工具类型。

5.1 PathKeys：获取对象所有嵌套路径#

1
type PathKeys<T, Prefix extends string = ''> =
2
  T extends object
3
    ? {
4
        [K in keyof T & string]:
5
          | `${Prefix}${K}`
6
          | PathKeys<T[K], `${Prefix}${K}.`>
7
      }[keyof T & string]
8
    : never;
9

10
interface User {
11
  name: string;
12
  address: {
13
    city: string;
14
    geo: {
15
      lat: number;
16
      lng: number;
17
    };
18
  };
19
  tags: string[];
20
}
21

22
type UserPaths = PathKeys<User>;
23
// "name" | "address" | "address.city" | "address.geo" | "address.geo.lat" | "address.geo.lng" | "tags"

5.2 PathValue：根据路径获取对应类型#

1
type PathValue<T, P extends string> =
2
  P extends `${infer Key}.${infer Rest}`
3
    ? Key extends keyof T
4
      ? PathValue<T[Key], Rest>
5
      : never
6
    : P extends keyof T
7
      ? T[P]
8
      : never;
9

10
type CityType = PathValue<User, 'address.city'>; // string
11
type LatType = PathValue<User, 'address.geo.lat'>; // number

5.3 类型安全的 EventEmitter#

1
type EventMap = {
2
  click: { x: number; y: number };
3
  focus: { target: string };
4
  resize: { width: number; height: number };
5
};
6

7
type TypedEmitter<Events extends Record<string, any>> = {
8
  on<K extends keyof Events>(event: K, handler: (payload: Events[K]) => void): void;
9
  emit<K extends keyof Events>(event: K, payload: Events[K]): void;
10
  off<K extends keyof Events>(event: K, handler: (payload: Events[K]) => void): void;
11
};
12

13
// 使用
14
declare const emitter: TypedEmitter<EventMap>;
15
emitter.on('click', (payload) => {
16
  // payload 自动推断为 { x: number; y: number }
17
  console.log(payload.x, payload.y);
18
});
19

20
emitter.emit('resize', { width: 100, height: 200 }); // ✅
21
// emitter.emit('resize', { width: 100 }); // ❌ 缺少 height

5.4 实现 PickByValue#

根据值的类型来筛选属性：

1
type PickByValue<T, V> = {
2
  [K in keyof T as T[K] extends V ? K : never]: T[K]
3
};
4

5
interface Mixed {
6
  name: string;
7
  age: number;
8
  active: boolean;
9
  email: string;
10
}
11

12
type StringProps = PickByValue<Mixed, string>;
13
// { name: string; email: string }

5.5 实现 MutableKeys 和 ReadonlyKeys#

1
type IfEquals<X, Y, A = X, B = never> =
2
  (<T>() => T extends X ? 1 : 2) extends (<T>() => T extends Y ? 1 : 2) ? A : B;
3

4
type ReadonlyKeys<T> = {
5
  [K in keyof T]-?: IfEquals<
6
    { [Q in K]: T[K] },
7
    { -readonly [Q in K]: T[K] },
8
    never,
9
    K
10
  >
11
}[keyof T];
12

13
type MutableKeys<T> = {
14
  [K in keyof T]-?: IfEquals<
15
    { [Q in K]: T[K] },
16
    { -readonly [Q in K]: T[K] },
17
    K,
18
    never
19
  >
20
}[keyof T];
21

22
interface Example {
23
  readonly id: number;
24
  name: string;
25
  readonly createdAt: Date;
26
  email: string;
27
}
28

29
type RK = ReadonlyKeys<Example>;  // "id" | "createdAt"
30
type MK = MutableKeys<Example>;   // "name" | "email"

5.6 实现 UnionToIntersection#

将联合类型转为交叉类型，这是一个经典的类型体操题：

1
type UnionToIntersection<U> =
2
  (U extends any ? (x: U) => void : never) extends (x: infer I) => void
3
    ? I
4
    : never;
5

6
type Union = { a: string } | { b: number } | { c: boolean };
7
type Intersection = UnionToIntersection<Union>;
8
// { a: string } & { b: number } & { c: boolean }

原理分析：

U extends any ? (x: U) => void : never — 利用分发特性，将联合类型的每个成员包装成函数参数
结果是 ((x: A) => void) | ((x: B) => void) | ((x: C) => void)
当这个联合函数类型被 infer 推断参数时，TypeScript 会取参数的交叉类型（逆变位置的联合 → 交叉）

5.7 实现 UnionToTuple#

这是类型体操的终极 Boss 之一：

1
type UnionToIntersection<U> =
2
  (U extends any ? (x: U) => void : never) extends (x: infer I) => void ? I : never;
3

4
type LastOfUnion<T> =
5
  UnionToIntersection<T extends any ? () => T : never> extends () => infer R ? R : never;
6

7
type UnionToTuple<T, Acc extends any[] = []> =
8
  [T] extends [never]
9
    ? Acc
10
    : UnionToTuple<Exclude<T, LastOfUnion<T>>, [LastOfUnion<T>, ...Acc]>;
11

12
type Tuple = UnionToTuple<'a' | 'b' | 'c'>;
13
// ['a', 'b', 'c']

六、类型体操的实际应用场景#

6.1 类型安全的 API 路由定义#

1
type ExtractRouteParams<T extends string> =
2
  T extends `${string}:${infer Param}/${infer Rest}`
3
    ? { [K in Param | keyof ExtractRouteParams<Rest>]: string }
4
    : T extends `${string}:${infer Param}`
5
      ? { [K in Param]: string }
6
      : {};
7

8
function defineRoute<T extends string>(
9
  path: T,
10
  handler: (params: ExtractRouteParams<T>) => void
11
) {
12
  // ...
13
}
14

15
defineRoute('/users/:id/posts/:postId', (params) => {
16
  // params: { id: string; postId: string }
17
  console.log(params.id, params.postId);
18
});

6.2 类型安全的 SQL Builder#

1
type Column<Table extends Record<string, any>> = keyof Table & string;
2

3
type SelectResult<
4
  Table extends Record<string, any>,
5
  Cols extends Column<Table>[]
6
> = Pick<Table, Cols[number]>;
7

8
interface UserTable {
9
  id: number;
10
  name: string;
11
  email: string;
12
  age: number;
13
}
14

15
function select<T extends Record<string, any>>() {
16
  return {
17
    columns<C extends Column<T>[]>(...cols: C) {
18
      return {
19
        from(table: string): SelectResult<T, C>[] {
20
          return [] as any;
21
        }
22
      };
23
    }
24
  };
25
}
26

27
const users = select<UserTable>().columns('name', 'email').from('users');
28
// users: Pick<UserTable, "name" | "email">[]
29
// 即 { name: string; email: string }[]

七、性能与注意事项#

7.1 递归深度限制#

TypeScript 对递归类型有深度限制（大约 1000 层）。超过后会报错 Type instantiation is excessively deep and possibly infinite。

1
// 可能触发深度限制的写法
2
type TooDeep<N extends number, T extends any[] = []> =
3
  T['length'] extends N ? T : TooDeep<N, [...T, any]>;
4

5
// type Huge = TooDeep<2000>; // ❌ 超过递归限制

7.2 尾递归优化#

TypeScript 4.5 引入了尾递归优化。确保递归调用在尾部位置：

1
// ✅ 尾递归 — 有优化
2
type Reverse<T extends any[], Acc extends any[] = []> =
3
  T extends [infer F, ...infer R]
4
    ? Reverse<R, [F, ...Acc]>
5
    : Acc;
6

7
// ❌ 非尾递归 — 无优化
8
type ReverseBad<T extends any[]> =
9
  T extends [infer F, ...infer R]
10
    ? [...ReverseBad<R>, F]
11
    : [];

7.3 编译性能#

复杂的类型体操会显著增加编译时间。在大型项目中要权衡类型安全和编译速度：

避免在热路径上使用深度递归类型
适当使用 any 或 as 做类型断言
考虑把复杂类型提取为独立的 .d.ts 文件

八、总结#

TypeScript 类型体操不是炫技——它是让类型系统为你工作的方式。掌握这些技巧后，你可以：

写出更精确的类型定义：减少 any，让编译器帮你捕获 bug
构建类型安全的工具库：API 路由、ORM、配置系统都能受益
理解开源库的类型定义：Vue、Prisma 等项目大量使用这些技巧

关键心法：

extends 是判断，infer 是提取，递归是循环
联合类型 + 条件类型 = 自动分发
模板字面量 + infer = 字符串模式匹配
元组 + 递归 = 列表操作

建议从 type-challenges 开始练习，从 easy 到 hard 逐步提升。类型体操和算法一样，练得多了自然就熟了。

音乐

音乐

TypeScript 类型体操实战：从 infer 到递归类型的高级技巧