脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → TypeScript Partial Pick

TypeScript 中 Partial 和 Pick 用法

 更新时间：2026年05月27日 09:26:34   作者：AI 前端  
TypeScript中的Partial和Pick是常用的工具类型,Partial将类型所有属性变为可选,Pick从类型中选取指定属性组成新类型,适用于字段筛选场景,下面就来详细的介绍一下

在 TypeScript 中，Partial 和 Pick 是两个常用的工具类型（Utility Types），用于更灵活地操作对象类型，尤其适用于 API 请求、表单处理、组件 Props 等场景。

Partial 的用法

  • 作用：将一个类型的所有属性变为可选（即添加 ?）。
  • 适用场景：更新操作（如 PATCH 请求），只需传入部分字段。
  • 源码实现：
type Partial<T> = { [P in keyof T]?: T[P]; };

示例：

interface User {
  id: number;
  name: string;
  email: string;
}

type UpdateUserDto = Partial<User>;
// 等价于：{ id?: number; name?: string; email?: string; }

const update: UpdateUserDto = { name: "Alice" }; // ✅ 合法

Pick 的用法

  • 作用：从一个类型中挑选指定的属性，组成一个新类型。
  • 适用场景：API 返回时只暴露部分字段（如列表页仅需 id 和 name），避免敏感信息泄露。
  • 源码实现：
type Pick<T, K extends keyof T> = { [P in K]: T[P]; };

示例：

interface User {
  id: number;
  name: string;
  email: string;
  password: string;
}

type UserPreview = Pick<User, 'id' | 'name' | 'email'>;
// 等价于：{ id: number; name: string; email: string; }

const user: UserPreview = { id: 1, name: "Bob", email: "bob@example.com" }; // ✅ 合法
// user.password; // ❌ 报错：类型中不包含 password

组合使用示例

结合 Partial 和 Pick 可实现更精细的类型控制：

// 创建时不需要 id，且 password 必填
type CreateUserDto = Omit<User, 'id'> & { password: string };

// 更新时排除 id，其他字段可选
type UpdateUserDto = Partial<Omit<User, 'id'>> & { id: number };

// 分页查询只允许筛选 name 和 email
type UserQueryParams = Partial<Pick<User, 'name' | 'email'>> & { page: number; pageSize: number };

关键区别总结

特性Partial<T>Pick<T, K>
目的所有属性变可选只保留指定属性
属性数量不变（但都可选）减少（仅保留 K 中的属性）
典型用途更新请求、表单草稿列表展示、安全字段暴露

💡 提示：两者都只作用于第一层属性，嵌套对象内部不会递归处理。若需深层操作，可考虑使用第三方库如 ts-toolbelt 或自定义递归工具类型。

到此这篇关于TypeScript 中 Partial 和 Pick 用法的文章就介绍到这了,更多相关TypeScript Partial Pick内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论