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 原则)。

相关推荐
Asize1 天前
Bun + TypeScript 实战:从接口约束到 RESTful 路由设计
后端·typescript·代码规范
大家的林语冰1 天前
超越 TypeScript,Flow 强势回归,语法高仿 TS,功能更丰富,类型更安全!
前端·javascript·typescript
用户484526255821 天前
Bun 入门:Bun.serve 零依赖启动 HTTP 服务
typescript
meilindehuzi_a2 天前
构建基于 RESTful 架构的 TodoList 全栈应用:从前后端理论到 TypeScript/Bun 实战
架构·typescript·restful
云水一下2 天前
Vue.js从零到精通系列(七):高级特性实战——Teleport、异步组件、自定义指令与TypeScript深度结合
前端·vue.js·typescript
濮水大叔3 天前
浅论CabloyJS全栈框架提供的“两级页签”机制
typescript·node.js·next.js
Asize3 天前
Bun + TypeScript:AI 时代的后端开发入门
人工智能·typescript·bun
退休倒计时3 天前
【每日一题】LeetCode 53. 最大子数组和 TypeScript
数据结构·算法·leetcode·typescript
小林ixn3 天前
你以为你懂 + 号?看完这篇 Bun + TS 实战,才发现以前全写错了
前端·javascript·typescript
晓杰'3 天前
从0到1实现Balatro游戏后端(8):Skip Blind与Tag奖励机制设计与实现
后端·websocket·typescript·项目实战·nestjs·状态管理·游戏服务器