我的博客
返回博客列表

TypeScript 高级类型技巧

博
博主
·
TypeScript类型系统技巧

TypeScript 的类型系统非常强大，掌握高级类型技巧可以让你的代码更加健壮和可维护。

条件类型

条件类型允许我们根据类型关系进行选择：

type IsString<T> = T extends string ? true : false;
 
type A = IsString<string>;  // true
type B = IsString<number>;  // false

映射类型

映射类型可以基于现有类型创建新类型：

type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};
 
type Partial<T> = {
  [P in keyof T]?: T[P];
};

模板字面量类型

模板字面量类型提供了强大的字符串操作能力：

type EventName<T extends string> = `on${Capitalize<T>}`;
 
type ClickEvent = EventName<'click'>;  // 'onClick'

实用技巧

1. 提取函数返回类型

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

2. 深度只读

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

3. 可选链式类型

type DeepPartial<T> = {
  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};

最佳实践

  1. 优先使用内置工具类型：TypeScript 提供了许多实用的工具类型
  2. 避免过度复杂化：类型应该提高代码清晰度，而不是增加复杂度
  3. 文档化复杂类型：为复杂的类型定义添加注释说明

总结

高级类型技巧是 TypeScript 的精华所在，合理运用可以大幅提升代码质量。