TypeScript 高级类型技巧

条件类型

条件类型是 TypeScript 类型系统中最强大的特性之一，它允许我们根据类型条件进行类型推断：

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

type A = IsString<string>; // true
type B = IsString<number>; // false

infer 关键字

infer 关键字允许我们在条件类型中推断类型：

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

function getUser() {
  return { name: "张三", age: 25 };
}

type UserType = ReturnType<typeof getUser>;
// { name: string; age: number }

映射类型

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

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

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

模板字面量类型

TypeScript 4.1 引入了模板字面量类型，让我们可以在类型层面操作字符串：

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

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

实际应用

这些高级类型技巧在实际项目中非常有用，比如：

表单验证：利用条件类型实现类型安全的表单校验
API 类型：自动推断 API 响应类型
状态管理：类型安全的状态和 action 定义

掌握这些技巧可以让你的 TypeScript 代码更加健壮和优雅。

条件类型

infer 关键字

映射类型

模板字面量类型

实际应用

评论