TypeScript Pick 怎么用

在日常做网页开发时，我们常需要处理大量数据对象——比如用户信息里有姓名、年龄、手机号、地址等十余个字段，但很多场景下只需要用到“姓名+手机号”这两个核心信息。如果直接复制整个用户对象，不仅会多传没用的数据，还容易不小心修改到无关字段，给后续调试埋坑。这时候，前端工具TypeScript里的Pick类型，就像给对象做“精准裁剪”的小剪刀，能帮我们只保留需要的字段，既省空间又能避免错误。

先搞懂Pick的核心作用：从大对象里“挑”字段

Pick的本质是TypeScript的一种工具类型，专门用来“从一个已有的类型里，挑选出你需要的字段，生成一个全新的类型”。举个生活化的例子：假设你有一整套乐高积木盒（对应原来的复杂类型），里面有圆形、方形、三角形等各种形状的积木。如果做一个“汽车轮子模型”，你只需要挑圆形积木，方形、三角形都用不上；Pick就相当于这个“挑积木”的动作，只给你留下做模型需要的零件。

比如我们先定义一个用户信息的基础类型：

`typescript

// 这是一个包含所有用户字段的类型

type User = {

name: string;

age: number;

phone: string;

address: string;

email: string;

}

`

如果现在要做“用户注册页的表单数据”，只需要用到name和phone两个字段，就可以用Pick生成新类型：

`typescript

// Pick的用法：Pick<原类型, '要保留的字段1' | '要保留的字段2'>

type RegisterForm = Pick<User, 'name' | 'phone'>

`

这样RegisterForm就只会有name和phone两个属性，其他字段都被“裁剪”掉了。

Pick的使用场景：3个日常开发的高频场景

Pick不是只能用在表单里，很多场景都能帮上忙，举三个最常见的例子：

• 缩小接口入参：比如后端给的用户接口需要传全量字段，但你做“修改昵称”功能时，只需要传name，用Pick生成EditName类型，就能避免不小心传了age等不该改的字段。
• 简化UI组件props：比如一个头像组件需要用到name（显示名字）和avatar（显示头像路径），如果原类型是User，直接用Pick<User, 'name' | 'avatar'>作为组件入参类型，组件代码会更简洁，不会出现多余的属性。
• 复用类型做校验规则：比如注册页需要校验name和phone的格式，登录页需要校验phone和password，用Pick分别生成两个不同的校验类型，就能直接复用基础规则，不用重复写代码。

用Pick要注意的2个小细节

虽然Pick很简单，但用的时候别踩两个小坑：

第一，要挑的字段必须是原类型里有的。比如刚才的User类型里没有nickname，如果写成Pick<User, 'nickname'>，TypeScript会直接报错，提示你“找不到这个属性”——就像你从乐高盒里挑三角形积木，结果盒子里根本没有，肯定挑不出来。

第二，Pick生成的新类型是全新的独立类型，和原类型互不干扰。比如你用Pick生成了RegisterForm，之后原User类型加了新字段，RegisterForm不会自动跟着变，需要你手动再更新一次——这一点正好符合“按需裁剪”的需求，不会出现意外的字段。

总的来说，Pick就是TypeScript里的“精准裁剪工具”，能帮开发者在复杂类型里快速提取需要的部分，让代码更简洁、更不容易出错，是前端开发里很实用的小技巧。