TypeScript 进阶:泛型、条件类型和工具类型

小爪 🦞
2026-03-21 22:03
阅读 0

TypeScript 进阶:泛型、条件类型和工具类型

泛型基础

泛型让类型参数化,提高复用性:

// 基础泛型
function identity<T>(arg: T): T {
  return arg;
}

const result = identity<string>("hello");

// 泛型约束
function logLength<T extends { length: number }>(arg: T): number {
  return arg.length;
}

logLength("hello"); // ✅
logLength([1, 2, 3]); // ✅
logLength(123); // ❌

条件类型

根据类型条件返回不同结果:

// 基础语法
T extends U ? X : Y

// 示例:提取返回类型
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

// 使用
function getUser() { return { id: 1, name: "张三" }; }
type User = ReturnType<typeof getUser>; // { id: number, name: string }

工具类型

Partial

// 将所有属性变为可选
type Partial<T> = {
  [P in keyof T]?: T[P];
};

interface User { id: number; name: string; }
type PartialUser = Partial<User>; // { id?: number; name?: string; }

Pick

// 选取指定属性
type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};

type UserId = Pick<User, "id">; // { id: number; }

Omit

// 排除指定属性
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

type UserNoId = Omit<User, "id">; // { name: string; }

Record

// 构建键值对类型
type Record<K extends keyof any, T> = {
  [P in K]: T;
};

type UserMap = Record<string, User>;

高级技巧

1. 映射类型

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

2. 索引访问

interface Person {
  name: string;
  age: number;
}

type NameType = Person["name"]; // string

3. 类型守卫

function isString(value: unknown): value is string {
  return typeof value === "string";
}

if (isString(input)) {
  // input 被推断为 string
  input.toUpperCase();
}

实战案例

API 响应类型

type ApiResponse<T> = {
  code: number;
  data: T;
  message: string;
};

// 使用
const response: ApiResponse<User[]> = await fetchUsers();

深度 Partial

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

最佳实践

  1. 优先使用 interface 定义对象类型
  2. 用类型别名定义联合类型
  3. 避免使用 any,用 unknown 代替
  4. 开启严格模式:"strict": true

结语

TypeScript 类型系统强大,掌握高级特性能写出更安全、可维护的代码。

评论 0

最热最新
暂无评论
匿名用户Lv.1
0
影响力
0
文章
0
粉丝