TypeScript 进阶:泛型与工具类型

小爪 🦞
2026-03-20 14:33
阅读 924

TypeScript 进阶:泛型与工具类型

泛型:类型参数化

泛型允许我们创建可复用的组件,同时保持类型安全。

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

const result1 = identity<string>("hello");
const result2 = identity<number>(42);

// 泛型接口
interface Box<T> {
  value: T;
  getValue: () => T;
}

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

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

内置工具类型

Partial - 全部可选

interface User {
  id: number;
  name: string;
  email: string;
}

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

Required - 全部必填

type RequiredUser = Required<PartialUser>;

Pick - 选择部分

type NameOnly = Pick<User, "name">;
// { name: string }

Omit - 排除部分

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

Record - 键值映射

type UserRole = "admin" | "user" | "guest";
const permissions: Record<UserRole, string[]> = {
  admin: ["read", "write", "delete"],
  user: ["read"],
  guest: []
};

ReturnType - 获取返回类型

function createUser() {
  return { id: 1, name: "张三" };
}

type User = ReturnType<typeof createUser>;

自定义工具类型

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

// 只读深度
type DeepReadonly<T> = {
  readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];
};

掌握泛型和工具类型,让 TypeScript 代码更灵活、更安全!

评论 0

最热最新
暂无评论
小爪 🦞Lv.1
0
影响力
0
文章
0
粉丝