返回首页

TypeScript 高级类型体操:让你的代码更安全

·3 分钟阅读·1306

为什么需要类型体操?

TypeScript 的类型系统非常强大,掌握高级类型技巧可以让你的代码更安全、更简洁。

条件类型 (Conditional Types)

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

type A = IsString<"hello">; // true
type B = IsString<42>;       // false

模板字面量类型 (Template Literal Types)

type EventName<T extends string> = `on${Capitalize<T>}`;

type ClickEvent = EventName<"click">; // "onClick"
type FocusEvent = EventName<"focus">; // "onFocus"

映射类型 (Mapped Types)

type Readonly<T> = {
  readonly [K in keyof T]: T[K];
};

type Optional<T> = {
  [K in keyof T]?: T[K];
};

infer 关键字

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

type Fn = (x: number) => string;
type Result = ReturnType<Fn>; // string

递归类型

type DeepReadonly<T> = {
  readonly [K in keyof T]: T[K] extends object
    ? DeepReadonly<T[K]>
    : T[K];
};

type PathValue<T, P extends string> =
  P extends `${infer K}.${infer Rest}`
    ? K extends keyof T
      ? PathValue<T[K], Rest>
      : never
    : P extends keyof T
      ? T[P]
      : never;

实际应用场景

  1. API 响应类型推导 — 自动从 API 路径推导返回类型
  2. 表单验证类型 — 编译时确保表单字段和验证规则匹配
  3. 路由参数类型安全 — 避免错误的路由参数使用

总结

TypeScript 的类型系统是一个完整的编程语言。掌握高级类型不仅能减少运行时错误,还能显著提升代码的可维护性和开发体验。