TypeScript 中,Pick 和 Omit 是两个非常常用且强大的内置工具类型(Utility Types)

TypeScript中的Pick和Omit是两个常用工具类型,用于从现有类型中选取或排除属性。


Pick通过"白名单"机制选取指定属性(如从User类型中只选id和name),适用于提取少量字段的场景。


Omit则通过"黑名单"机制排除指定属性(如从User中剔除id和createdAt),适用于复用大部分字段的情况。


两者配合能有效减少重复类型定义,保持代码DRY原则,常见于API响应分层、表单验证等场景,通过类型运算实现数据的精确控制。


在 TypeScript 中,PickOmit 是两个非常常用且强大的内置工具类型(Utility Types)


它们都基于泛型实现,主要用于对现有的对象类型进行"重塑",即从一个复杂的类型中选取部分属性或剔除部分属性,从而生成新的类型。


这两个工具类型在处理 API 响应、表单数据、数据库模型映射等场景中极其高频。


1. Pick<Type, Keys>


定义
Pick 用于从类型 Type选取 一组特定的属性键 Keys,并构造一个新的类型。新类型只包含你指定的那些属性。


语法

TypeScript 复制代码
type Pick<Type, Keys extends keyof Type> = {
  [Property in Keys]: Type[Property];
};

通俗理解

"我只想要这个大对象里的这几样东西。"

代码示例

假设我们有一个描述用户的完整类型 User

TypeScript 复制代码
interface User {
  id: number;
  name: string;
  email: string;
  age: number;
  role: 'admin' | 'guest';
  createdAt: Date;
}

如果我们只想在用户列表页面显示 idname,不想暴露敏感信息(如 email)或不必要的元数据(如 createdAt),可以使用 Pick

TypeScript 复制代码
// 只保留 id 和 name
type UserListItem = Pick<User, 'id' | 'name'>;

// UserListItem 等价于:
// {
//   id: number;
//   name: string;
// }

const userItem: UserListItem = {
  id: 1,
  name: "Alice",
  // error: 如果这里加上 email 或其他属性,TS 会报错
};

2. Omit<Type, Keys>


定义
Omit 用于从类型 Type剔除 (省略)一组特定的属性键 Keys,并构造一个新的类型。新类型包含原类型中除了指定键以外的所有属性。


语法

TypeScript 复制代码
type Omit<Type, Keys extends keyof any> = Pick<Type, Exclude<keyof Type, Keys>>;

(注:它的内部实现其实就是先算出"剩下的键",然后再用 Pick 选出来)

通俗理解

"我想要这个大对象里的所有东西,除了这几样。"

代码示例

继续使用上面的 User 类型。如果在创建新用户时,idcreatedAt 是由数据库自动生成的,前端不应该传递这两个字段,我们可以使用 Omit

TypeScript 复制代码
// 剔除 id 和 createdAt
type CreateUserInput = Omit<User, 'id' | 'createdAt'>;

// CreateUserInput 等价于:
// {
//   name: string;
//   email: string;
//   age: number;
//   role: 'admin' | 'guest';
// }

const newUser: CreateUserInput = {
  name: "Bob",
  email: "bob@example.com",
  age: 25,
  role: "guest",
  // error: 如果这里加上 id 或 createdAt,TS 会报错
};

3. 核心对比总结

特性 Pick Omit
操作逻辑 白名单机制:只保留列出的属性 黑名单机制:删除列出的属性,保留其余
适用场景 当你需要提取少量字段组成新视图时 当你需要复用大部分字段,仅排除少数几个字段时
数学逻辑 交集 (Intersection) 概念 差集 (Difference) 概念
内部关系 基础构建块 通常由 Pick + Exclude 组合实现

4. 实际开发中的高频用法

场景 A:API 响应分层

后端返回完整的用户信息,但前端不同组件需要不同的数据结构。

TypeScript 复制代码
// 完整数据
type ApiUserResponse = User;

// 公开个人资料页(隐藏 email 和 role)
type PublicProfile = Omit<User, 'email' | 'role'>;

// 管理员表格(只需要关键标识)
type AdminTableItem = Pick<User, 'id' | 'name' | 'role'>;

场景 B:表单验证

实体类包含数据库字段,但表单输入不需要某些自动生成的字段。

TypeScript 复制代码
// 数据库实体
interface Product {
  id: string;
  sku: string;
  price: number;
  stockCount: number;
  lastUpdated: string; 
}

// 创建产品表单(不需要 id 和 lastUpdated)
type CreateProductForm = Omit<Product, 'id' | 'lastUpdated'>;

// 更新产品表单(可能只需要部分字段可选)
type UpdateProductForm = Partial<Pick<Product, 'price' | 'stockCount'>>;

总结

  • Pick = 做减法(从全集里挑出子集)。
  • Omit = 做排除(从全集里去掉子集)。

掌握这两个工具类型,可以极大地减少重复定义接口的代码量,并保持类型定义与源数据模型的一致性(DRY 原则)。

相关推荐
濮水大叔1 天前
在大型 Vue 项目中,如何有效管理复杂的状态?“散装版” vs “套装版”
前端·vue.js·typescript
谷哥的小弟2 天前
TypeScript数组类型
javascript·typescript
退休倒计时2 天前
【每日一题】LeetCode 199. 二叉树的右视图 TypeScript
算法·leetcode·typescript
前端之虎陈随易3 天前
编程语言级别的Skill市场,AI Agent 的未来形态
前端·vue.js·人工智能·typescript·node.js
后台开发者Ethan3 天前
类型分类、联合类型、交叉类型
typescript
鹰影473 天前
一款AI笔记助手和远程同步的markdown笔记idea-note
人工智能·笔记·rust·typescript·react
想你依然心痛3 天前
AtomCode 在前端开发中的实战体验:React + TypeScript 项目开发实录
前端·react.js·typescript
疯狂的魔鬼3 天前
精确计算容器剩余视口高度:useAutoContainerFullHeight 的工程实践
前端·css·typescript
后台开发者Ethan3 天前
类型与变量
开发语言·typescript
孤狼warrior3 天前
从冒泡到传送带流水线:一个3D沉浸式算法靶场,让思想的伟力改变世界
python·算法·typescript