工具类型(Utility Types)如 Partial、Pick、Record 的使用场景
介绍了 Partial、Pick 和 Record 的使用场景,并通过示例代码说明了它们在实际开发中的应用场景。
工具类型(Utility Types) 是 TypeScript 提供的内置类型操作,用于简化和强化类型声明。它们基于泛型和条件类型实现,常用于类型变换和处理。以下是 Partial、Pick 和 Record 的使用场景解释,附代码示例。
Partial<T> 的使用场景
Partial 的作用是让泛型 T 的所有属性变为可选(添加 ? 修饰符)。 使用场景包括:
- 表单或配置对象:用户在多个步骤中填写时,字段不全需,可部分赋值。例如,多步骤注册表单。
interface User { name: string; age: number; } type PartialUser = Partial<User>; const userInput: PartialUser = { name: 'Alice' }; // ok, age 可选
- 更新已有对象:在数据库中更新部分属性不影响其他。
function updateUser(user: User, update: Partial<User>) { return { ...user, ...update }; } const original = { name: 'John', age: 25 }; const updated = updateUser(original, { age: 26 }); // 仅更新 age
- 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 创建新类型。 使用场景包括:
- 仅需对象部分属性:如在列表显示中筛选非敏感字段。
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' };
- 定义功能子集:处理仅涉及特定属性的组件。
function displayName(user: Pick<User, 'name'>) { return `Hi ${user.name}`; } displayName({ name: 'Jerry' }); // ok, 仅 name 必须
Record<K, T> 的使用场景
Record 创建一个键为 K、值为 T 的映射对象。 使用场景包括:
- 键值对结构:如定义枚举映射配置。
type UserRoles = 'admin' | 'user'; const permissions: Record<UserRoles, boolean> = { admin: true, user: false };
- 通用字典对象:API 响应中的键值数据结构。
const config: Record<string, string> = { apiUrl: 'https://api.example.com', theme: 'dark' };