TypeScript 高级类型技巧

1. 条件类型

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

// 基础语法
type IsString<T> = T extends string ? true : false;

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

// 实际应用：提取返回类型
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; }

2. 映射类型

批量修改对象属性。

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

// 将所有属性变为只读
type Readonly<T> = {
  readonly [K in keyof T]: T[K];
};

// 自定义映射
type Nullable<T> = {
  [K in keyof T]: T[K] | null;
};

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

type NullableUser = Nullable<User>;
// { id: number | null; name: string | null; email: string | null; }

3. 索引访问类型

通过键名获取类型。

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

type UserId = User["id"];  // number
type UserName = User["name"];  // string

// 动态键名
type Keys = keyof User;  // "id" | "name" | "email"
type Values = User[Keys];  // number | string

4. 工具类型组合

// Pick: 选择部分属性
type UserBase = Pick<User, "id" | "name">;

// Omit: 排除部分属性
type UserWithoutEmail = Omit<User, "email">;

// Record: 创建对象类型
type UserMap = Record<string, User>;

// Exclude: 从联合类型中排除
type NonNullable<T> = Exclude<T, null | undefined>;

// Parameters: 获取函数参数类型
type FnParams = Parameters<(a: string, b: number) => void>;
// [string, number]

5. 泛型约束

// 基础约束
interface Lengthwise {
  length: number;
}

function logLength<T extends Lengthwise>(arg: T): void {
  console.log(arg.length);
}

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

// 多约束
function merge<T extends object, U extends object>(a: T, b: U): T & U {
  return { ...a, ...b };
}

// 约束中的键名
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { id: 1, name: "张三" };
const id = getProperty(user, "id");  // ✅
const age = getProperty(user, "age");  // ❌

实战案例：API 响应类型

// 基础响应
type ApiResponse<T> = {
  code: number;
  message: string;
  data: T;
};

// 分页响应
type PaginatedResponse<T> = ApiResponse<{
  items: T[];
  total: number;
  page: number;
  pageSize: number;
}>;

// 使用
interface User {
  id: number;
  name: string;
}

type UserListResponse = PaginatedResponse<User>;

结语

掌握这些技巧，TypeScript 类型系统将成为你的超能力！