脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Mammoth.js安装和配置指南详细步骤

    Mammoth.js安装和配置指南详细步骤

    Mammoth.js是开源工具,将.docx文档转换为HTML格式,支持JavaScript开发,这篇文章主要介绍了Mammoth.js安装和配置指南的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-06-06
  • 浅谈小程序globalData的那些事儿

    浅谈小程序globalData的那些事儿

    这篇文章主要介绍了浅谈小程序globalData的那些事儿，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • Script的加载方法小结

    Script的加载方法小结

    对动态加载脚本，需要重点关注的一个问题是，所动态加载的JS脚本的接口依赖问题。
    2011-01-01
  • WEEX环境搭建与入门详解

    WEEX环境搭建与入门详解

    这篇文章主要介绍了WEEX环境搭建与入门详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • javascript 遮照层效果

    javascript 遮照层效果

    遮照层效果实现代码。
    2009-09-09
  • JavaScript 继承的实现

    JavaScript 继承的实现

    正因为JavaScript本身没有完整的类和继承的实现，并且我们也看到通过手工实现的方式存在很多问题， 因此对于这个富有挑战性的任务网上已经有很多实现了
    2009-07-07
  • JSDoc 介绍使用规范JsDoc的使用介绍

    JSDoc 介绍使用规范JsDoc的使用介绍

    JsDoc Toolkit 是一个把js描述格式化成文档的工具。开发者只需按JsDoc的规范写好注释就可以很方便导出文档。它是google 推荐的 JsDoc生成工具。
    2011-02-02
  • 微信小程序实现拍照功能

    微信小程序实现拍照功能

    这篇文章主要为大家详细介绍了微信小程序实现拍照功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 前端原生js实现拖拽排课效果实例

    前端原生js实现拖拽排课效果实例

    这篇文章主要介绍了如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2025-02-02
  • 纯前端导出txt文本文件具体流程

    纯前端导出txt文本文件具体流程

    TXT作为纯文本格式,只支持无格式的文本内容,不包括任何样式信息,下面这篇文章主要给大家介绍了关于纯前端导出txt文本文件的相关资料,文中给出了详细的代码示例,需要的朋友可以参考下
    2024-08-08

最新评论