1. 模板字面量类型#

类型层面也能做字符串拼接：

1
type World = "world";
2
type Hello = `hello ${World}`; // "hello world"
3

4
type EventName<T extends string> = `${T}Changed`;
5
type E = EventName<"name">; // "nameChanged"

配合联合会笛卡尔展开：

1
type Color = "red" | "blue";
2
type Size = "s" | "m";
3
type Class = `${Color}-${Size}`; // "red-s" | "red-m" | "blue-s" | "blue-m"

实战：给 CSS 属性名加前缀、给事件名加 on 等。

2. 递归类型#

类型可递归引用自身，处理嵌套结构：

1
type Json =
2
  | string | number | boolean | null
3
  | Json[]
4
  | { [key: string]: Json };

递归类型描述树/JSON 等自相似数据。配合映射类型可写 DeepReadonly、DeepPartial（第 7 篇提过）。

3. 索引访问进阶#

1
type Prop<T, K extends keyof T> = T[K];
2
type Nested = { user: { name: string } };
3
type Name = Nested["user"]["name"]; // string（链式索引访问）

4. 手搓工具类型（核心练习）#

1
type MyPick<T, K extends keyof T> = {
2
  [P in K]: T[P];
3
};
4
type R = MyPick<{ a: 1; b: 2 }, "a">; // { a: 1 }

1
type MyReadonly<T> = {
2
  readonly [K in keyof T]: T[K];
3
};

1
type MyOmit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
2
// 或
3
type MyOmit2<T, K extends keyof T> = {
4
  [P in Exclude<keyof T, K>]: T[P];
5
};

1
type MyAwaited<T> =
2
  T extends Promise<infer U>
3
    ? U extends Promise<any>
4
      ? MyAwaited<U>
5
      : U
6
    : never;
7
type R = MyAwaited<Promise<Promise<number>>>; // number

1
type MyCapitalize<T extends string> =
2
  T extends `${infer F}${infer Rest}`
3
    ? `${Uppercase<F>}${Rest}`
4
    : T;
5
type R = MyCapitalize<"hello">; // "Hello"

5. 类型体操的套路#

1. 拆：把目标类型拆成”键的集合”与”值的变换”。
2. 遍历：用 [K in keyof T] 或 [K in U] 映射。
3. 提取：用 infer 在条件类型里抓子类型。
4. 递归：遇到嵌套用自身再调一次。
5. 约束：用 K extends keyof T 保证合法。

这些也是 type-challenges（社区题库）的常考题。

6. 现实中的边界#

类型体操很酷，但生产代码别过度：类型越复杂，编译越慢、可读性越差。原则：

• 库作者/通用工具值得做；业务代码能用内置 Partial/Pick/Omit 就别手写。
• 类型报错难读时，先想”是不是设计太复杂”，而非硬刚。

小结#

• 模板字面量类型可做类型级字符串拼接与联合展开。
• 递归类型描述自相似结构（JSON/树）。
• 手搓 MyPick/MyReadonly/MyOmit/MyAwaited 掌握映射+infer 套路。
• 类型体操适可而止，业务里优先用内置工具类型。

练习#

1. 实现 MyExclude<T, U>（T extends U ? never : T）。
2. 实现 MyRecord<K extends keyof any, V>（{ [P in K]: V }）。
3. 用模板字面量实现 type Handler<T extends string> = \on${Capitalize}“。
4. 实现递归 MyDeepReadonly<T>，让嵌套对象全部只读。