引言：当类型系统成为编程语言

TypeScript 的类型系统早已超越了"给 JavaScript 加类型注解"的初心。从 2.0 到 5.x，一系列特性的引入——conditional types、template literal types、mapped types、infer——让它逐渐演变成一套图灵完备的类型级编程语言。本文不讲入门，我们直接进入实战：如何用 TypeScript 的类型系统解决真实工程问题，而不仅仅是刷 type-challenges。

一、模板字面量类型：字符串的类型级运算

TypeScript 4.1 引入了 Template Literal Types，它让类型系统能够对字符串进行拼接、转换和模式匹配。这不是语法糖——这是一个范式转变。

1.1 CSS 属性的类型安全推导

前端开发中，CSS 属性名和值的对应关系是经典类型难题。模板字面量类型可以精确描述这种关系：

type CSSProperty = "margin" | "padding" | "border";
type Direction = "top" | "right" | "bottom" | "left";
type Size = `\${number}\${"" | "px" | "rem" | "em" | "%"}`;

// 自动推导出所有可能的属性名
type CSSPropName = `\${CSSProperty}-\${Direction}`;
// "margin-top" | "margin-right" | ... | "padding-bottom" | ...

// 属性名到值类型的映射
type CSSValueMap = {
  [K in CSSPropName]: Size;
};

// 使用时有完整的属性名提示
const style: CSSValueMap = {
  "margin-top": "16px",    // ✅ 类型通过
  "padding-left": "2rem",  // ✅
  "margin-keft": "10px",   // ❌ 拼写错误，编译时报错
};

1.2 事件类型的自动推导

在组件库开发中，事件名和回调参数的映射是高频需求：

type EventMap = {
  click: MouseEvent;
  focus: FocusEvent;
  keydown: KeyboardEvent;
  input: InputEvent;
};

type EventHandler<K extends keyof EventMap> = (e: EventMap[K]) => void;
type EventName<K extends string> = `on\${Capitalize<K>}`;

type EventProps = {
  [K in keyof EventMap as EventName<string & K>]?: EventHandler<K>;
};
// 结果：{ onClick?: (e: MouseEvent) => void; ... }

这里 Capitalize 是 TypeScript 内置的工具类型，as EventName<string & K> 实现了键名的重映射（Key Remapping via as）。一气呵成，零运行时开销。

二、条件类型与 infer：类型级模式匹配

infer 关键字让条件类型具备了模式匹配能力——你可以在类型位置"声明"一个变量，让 TypeScript 自动推导它的值。

2.1 深层 Promise 解包

type DeepAwaited<T> = T extends Promise<infer U>
  ? DeepAwaited<U>
  : T extends object
  ? { [K in keyof T]: DeepAwaited<T[K]> }
  : T;

type Result = DeepAwaited<Promise<Promise<{ name: string; data: Promise<number> }>>>;
// 推导为: { name: string; data: number }

递归的条件类型让嵌套 Promise 的解包变成一行类型声明。这在设计异步 API 时极为有用。

2.2 函数签名的精确提取

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

type InstanceOf<T> = T extends new (...args: any[]) => infer I ? I : never;

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

三、类型级编程的工程实践

3.1 类型安全的 API 客户端生成

type ApiRoutes = {
  "/api/users": {
    GET: { response: User[] };
    POST: { body: CreateUserDTO; response: User };
  };
  "/api/users/:id": {
    GET: { response: User };
    DELETE: { response: void };
  };
};

type ExtractParams<Path> = Path extends `\${string}:\${infer Param}/\${infer Rest}`
  ? { [K in Param | keyof ExtractParams<Rest>]: string }
  : Path extends `\${string}:\${infer Param}`
  ? { [K in Param]: string }
  : {};

type ApiClient = {
  [Path in keyof ApiRoutes]: {
    [Method in keyof ApiRoutes[Path]]: (
      ...args: ApiRoutes[Path][Method] extends { body: infer B }
        ? [params: ExtractParams<Path>, body: B]
        : [params: ExtractParams<Path>]
    ) => Promise<
      ApiRoutes[Path][Method] extends { response: infer R } ? R : never
    >;
  };
};

路由路径中的 :id 参数会被自动提取和类型约束，请求参数的类型根据 HTTP Method 自动推导，返回值类型也与路由定义完全对应。

3.2 组件 Props 的互斥约束

type ButtonProps =
  | { color: string; gradient?: never }
  | { color?: never; gradient: [string, string] }
  | { color?: never; gradient?: never };

type MutuallyExclusive<T, K extends keyof T> = {
  [P in K]: Pick<T, P> & { [Q in Exclude<K, P>]?: never };
}[K] & Omit<T, K>;

四、性能陷阱与最佳实践

4.1 递归深度的限制

// ❌ 超深递归风险
type DeepReadonly<T> = {
  readonly [K in keyof T]: T[K] extends object ? DeepReadonly<T[K]> : T[K];
};

// ✅ 加递归终止条件
type DeepReadonly<T> = T extends Function | Date | RegExp
  ? T
  : { readonly [K in keyof T]: DeepReadonly<T[K]> };

4.2 编译性能优化

• 提取公共类型到 .d.ts：避免重复计算
• 使用 satisfies 替代类型断言：保留推导能力
• 避免热路径上的 ReturnType<typeof fn>：防止级联重计算
• 边界处用 Zod 校验：类型体操不能替代 runtime validation

五、可读性优先于巧妙

// ❌ 过于聪明
type ParseQueryString<S> = S extends `\${infer K}=\${infer V}&\${infer Rest}`
  ? { [P in K | keyof ParseQueryString<Rest>]: P extends K ? V : ParseQueryString<Rest>[P] }
  : S extends `\${infer K}=\${infer V}` ? { [K]: V } : {};

// ✅ 拆成可读的辅助类型
type ParseKV<Pair extends string> = Pair extends `\${infer K}=\${infer V}` ? Record<K, V> : {};
type MergeObjects<T, U> = Omit<T, keyof U> & U;
type ParseQueryString<S extends string> =
  S extends `\${infer First}&\${infer Rest}`
    ? MergeObjects<ParseKV<First>, ParseQueryString<Rest>>
    : ParseKV<S>;

总结

1. 用类型推导替代手工标注——让编译器帮你算，而不是你帮编译器写
2. 用类型约束替代运行时校验——在编译期就消灭一类 bug
3. 写人能读懂的类型——可维护性 > 炫技
4. 边界处用 Zod，内部处用体操——信任边界划分是工程成熟度的标志

类型是给未来的自己和团队写的文档。让它精确而不失可读，这才是类型体操的最终得分。