面试题：TypeScript 工具类型 Pick 的原理及使用场景

Question

请解释 TypeScript 中 Pick 工具类型的原理，并举例说明它在实际前端开发中的一个使用场景。

Answer 1

Pick 工具类型原理

Pick 是 TypeScript 内置的工具类型，用于从一个类型中选取部分属性，创建一个新类型。它基于映射类型实现。其定义如下：

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

这里 T 是源类型，K 是由 T 的属性键组成的联合类型。通过映射类型，遍历 K 中的每个属性键 P，并从 T 中获取对应的属性类型 T[P]，从而创建新类型。

实际前端开发使用场景

假设我们有一个表示用户信息的类型 UserInfo：

type UserInfo = {
    id: number;
    name: string;
    age: number;
    email: string;
    address: string;
};

在某些场景下，比如只需要向外部接口展示基本用户信息，我们可以使用 Pick 来创建一个新类型：

type BasicUserInfo = Pick<UserInfo, 'id' | 'name' | 'age'>;
// 此时 BasicUserInfo 只包含 id、name、age 三个属性
const basicUser: BasicUserInfo = {
    id: 1,
    name: 'John',
    age: 30
};

这样在前端开发中，通过 Pick 可以灵活地抽取所需属性类型，减少数据传输和处理的冗余，增强类型安全性。