前言

一、常用工具类型分类

1. 基础修饰类

Partial

将类型 T 的所有属性变为可选。

ts
interface User {
  id: number;
  name: string;
  age: number;
}
    
type PartialUser = Partial<User>;
// 等价于 { id?: number; name?: string; age?: number }

适用场景：如更新用户信息时，允许部分字段可选。

Required

将类型 T 的所有属性变为必填。

ts
interface Config {
  url?: string;
  cache?: boolean;
}

type StrictConfig = Required<Config>;
// { url: string; cache: boolean }

适用场景：要求配置对象必须提供所有属性。

Readonly

将类型 T 的所有属性设为只读。

ts
interface Point {
  x: number;
  y: number;
}

type ReadonlyPoint = Readonly<Point>;
// { readonly x: number; readonly y: number }

适用场景：如 React 组件的 props 应不可变。

2. 结构挑选类Pick<T, K>

从 T 中选取指定属性 K。

ts
interface User {
  id: number;
  name: string;
  age: number;
}

type UserPreview = Pick<User, 'id' | 'name'>;
// { id: number; name: string }

适用场景：列表页仅展示部分字段。

Omit<T, K>

从 T 中移除指定属性 K。

ts
interface User {
  id: number;
  name: string;
  password: string;
}

type SafeUser = Omit<User, 'password'>;
// { id: number; name: string }

适用场景：返回用户信息时隐藏敏感字段。

Record<K, T>

构建一个键类型为 K、值类型为 T 的对象。

ts
type Role = 'admin' | 'user';
type RoleMap = Record<Role, number>;
// { admin: number; user: number }

适用场景：构建枚举到权限的映射结构。

3. 类型过滤类

Exclude<T, U>

从 T 中排除 U 中的类型。

ts
type T = Exclude<'a' | 'b' | 'c', 'a'>;
// 'b' | 'c'

适用场景：过滤联合类型中的某些项。

Extract<T, U>

提取 T 和 U 中共有的类型。

ts
type T = Extract<'a' | 'b' | 'c', 'a' | 'f'>;
// 'a'

适用场景：提取允许使用的类型子集。

NonNullable

排除 T 中的 null 和 undefined。

ts
type T = NonNullable<string | null | undefined>;
// string

适用场景：严格模式下确保类型不为空。

4. 函数相关类

ReturnType

提取函数 T 的返回值类型。

ts
function fetchUser() {
  return { id: 1, name: 'Alice' };
}

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

适用场景：提取接口返回值类型，避免重复声明。

Parameters

提取函数 T 的参数类型元组。

ts
function greet(name: string, age: number) {}

type Params = Parameters<typeof greet>;
// [string, number]

适用场景：复用已有函数的参数类型。

ConstructorParameters

提取构造函数 T 的参数类型。

ts
class Person {
  constructor(name: string, age: number) {}
}

type Params = ConstructorParameters<typeof Person>;
// [string, number]

适用场景：工厂函数中自动推断构造参数。

InstanceType

提取构造函数 T 的实例类型。

ts
class Person {
  name: string;
  constructor(name: string) { this.name = name; }
}

type P = InstanceType<typeof Person>;
// Person

适用场景：基于类类型生成其实例类型。

ThisParameterType

提取函数 T 的 this 类型。

ts
function say(this: { name: string }) { return this.name; }

type T = ThisParameterType<typeof say>;
// { name: string }

适用场景：约束函数中的上下文类型。

OmitThisParameter

移除函数 T 的 this 参数类型。

ts
function say(this: { name: string }) { return this.name; }

type Fn = OmitThisParameter<typeof say>;
// () => string

适用场景：将绑定 this 的函数转为无 this 的普通函数。

二、实际应用示例

1. 提取 API 返回值并隐藏敏感字段

ts
async function getUser() {
  return { id: 1, name: 'Tom', token: 'secret' };
}

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

2. 表单局部更新

ts
interface UserForm {
  name: string;
  age: number;
  email: string;
}

function updateUser(id: number, data: Partial<UserForm>) {}

3. 构建路由映射配置

ts
type Routes = 'home' | 'about' | 'login';
type RouteConfig = Record<Routes, string>;
// { home: string; about: string; login: string }

4. 强制 React 组件 Props 必传

ts
interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

type RequiredButton = Required<ButtonProps>;
// 所有属性变为必填