工具类型(Utility Types)如 Partial、Pick、Record 的使用场景

介绍了 Partial、Pick 和 Record 的使用场景,并通过示例代码说明了它们在实际开发中的应用场景。

TypeScript 中等 工具类型 Utility Types Partial

工具类型(Utility Types) 是 TypeScript 提供的内置类型操作,用于简化和强化类型声明。它们基于泛型和条件类型实现,常用于类型变换和处理。以下是 Partial、Pick 和 Record 的使用场景解释,附代码示例。

Partial<T> 的使用场景

Partial 的作用是让泛型 T 的所有属性变为可选(添加 ? 修饰符)。 使用场景包括:

  1. 表单或配置对象:用户在多个步骤中填写时,字段不全需,可部分赋值。例如,多步骤注册表单。
    interface User { name: string; age: number; }
    type PartialUser = Partial<User>;
    const userInput: PartialUser = { name: 'Alice' }; // ok, age 可选
    
  2. 更新已有对象:在数据库中更新部分属性不影响其他。
    function updateUser(user: User, update: Partial<User>) { return { ...user, ...update }; }
    const original = { name: 'John', age: 25 };
    const updated = updateUser(original, { age: 26 }); // 仅更新 age
    
  3. API 请求部分更新:API 接受 partial data 时使用。
    async function patchData(endpoint: string, data: Partial<User>) { 
       return fetch(endpoint, { method: 'PATCH', body: JSON.stringify(data) });
    }
    

Pick<T, K> 的使用场景

Pick 用于从 T 中选择指定键集合 K 创建新类型。 使用场景包括:

  1. 仅需对象部分属性:如在列表显示中筛选非敏感字段。
    interface User { id: number; name: string; email: string; }
    type UserProfile = Pick<User, 'id' | 'name'>; // { id: number; name: string; }
    const profile: UserProfile = { id: 1, name: 'Tom' };
    
  2. 定义功能子集:处理仅涉及特定属性的组件。
    function displayName(user: Pick<User, 'name'>) { return `Hi ${user.name}`; }
    displayName({ name: 'Jerry' }); // ok, 仅 name 必须
    

Record<K, T> 的使用场景

Record 创建一个键为 K、值为 T 的映射对象。 使用场景包括:

  1. 键值对结构:如定义枚举映射配置。
    type UserRoles = 'admin' | 'user';
    const permissions: Record<UserRoles, boolean> = { 
       admin: true, 
       user: false 
    };
    
  2. 通用字典对象:API 响应中的键值数据结构。
    const config: Record<string, string> = {
       apiUrl: 'https://api.example.com',
       theme: 'dark'
    };