TypeScript 高级技巧：泛型、条件类型与工具类型

泛型进阶

泛型约束

// 约束 T 必须有 length 属性
function logLength<T extends { length: number }>(arg: T): void {
  console.log(arg.length);
}

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

多个泛型参数

function merge<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

const result = merge({ name: "John" }, { age: 30 });
// result: { name: string } & { age: number }

条件类型

基础语法

// T extends U ? X : Y
type IsString<T> = T extends string ? true : false;

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

推断类型

type UnwrapArray<T> = T extends (infer U)[] ? U : T;

type A = UnwrapArray<string[]>;  // string
type B = UnwrapArray<number>;    // number

内置工具类型

Partial - 全部可选

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

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

Pick - 选择指定字段

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

Omit - 排除指定字段

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

Record - 构建对象类型

type UserRole = "admin" | "user" | "guest";
type Permissions = Record<UserRole, string[]>;
// {
//   admin: string[];
//   user: string[];
//   guest: string[];
// }

ReturnType - 获取函数返回类型

function getUser() {
  return { id: 1, name: "John" };
}

type User = ReturnType<typeof getUser>;
// { id: number; name: string; }

自定义工具类型

ReadonlyDeep - 深度只读

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

Mutable - 移除 readonly

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

实战技巧

函数重载

function formatDate(date: Date): string;
function formatDate(timestamp: number): string;
function formatDate(value: Date | number): string {
  const date = typeof value === "number" ? new Date(value) : value;
  return date.toISOString();
}

类型守卫

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

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

总结

掌握这些高级技巧，让你的 TypeScript 代码更类型安全、更优雅！