实现 TS 内置的 Pick＜T, K＞

原创已于 2024-02-06 14:00:41 修改 · 611 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #typescript

于 2024-01-08 20:12:38 首次发布

Typescript 专栏收录该内容

7 篇文章

订阅专栏

文章介绍了如何在TypeScript中不依赖内置的Pick<T,K>，而是通过自定义MyPick类型推导机制，从接口如Todo中选择指定属性，构建新的类型实例。

不使用 Pick<T, K> ，实现 TS 内置的 Pick<T, K> 的功能。

从类型 T 中选出符合 K 的属性，构造一个新的类型。

例如：

interface Todo {
  title: string
  description: string
  completed: boolean
}

type TodoPreview = MyPick<Todo, 'title' | 'completed'>

const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
}

解法：

type MyPick<T, K extends keyof T> = {
    [key in K] : T[key]
    
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Repeater、

关注关注

10
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

ts这三个工具类型你见过吗？(Pick,Omit,Partial )

专研技术的大学生:会点Java和前端

02-13

502

本文介绍了TypeScript中三个实用的内置工具类型：Pick、Omit和Partial。Pick允许从现有类型中选取指定属性创建新类型，Omit则相反，会排除指定属性保留其他属性，而Partial会将类型的所有属性变为可选。通过示例代码展示了如何使用这些工具类型来处理对象类型，它们能够简化类型定义，提高代码的可维护性和可读性，特别适用于大型应用程序的开发场景

实现 TypeScript 内置工具类型（源码解析与实现）

热门推荐

织网的博客

12-01

4万+

TS 里几个常用的内置工具类型（Partial、Partial 、 Required 、 Readonly、 Pick 、 Exclude 、 Extract 、 Omit）的使用 TypeScript 提供的内置工具类型，是提升类型安全性与开发效率的“利器”。它们基于泛型和映射类型实现，能快速处理常见的类型转换需求（如可选/必选属性切换、对象字段筛选等），避免重复编写冗余类型代码。本文将系统梳理 12 个常用内置工具类型，从源码原理、分步解析到实战场景，帮你彻底掌握其用法。

Pick 与 Omit 及 Partial 与 Required 及 enum枚举 TS内置类型

奔跑吧代码

03-31

1051

Pick 与 Omit 及 Partial 与 Required 及 enum枚举 TS内置类型

【ts类型体操】00004-easy-pick

qq_45679015的博客

05-06

457

要求：实现TS内置的Pick<T,K> 从类型T中选择出属性K，构造一个新的类型 type MyPick<T, K>=any import type { Equal, Expect } from '@type-challenges/utils' type cases = [ Expect<Equal<Expected1, MyPick<Todo, 'title'>>>, Expect<Equal<Expected2,

TS 全局泛型工具Pick、Omit

m0_73461567的博客

02-23

3365

使用： Pick使用： Omit【一】： Pick 可以从一个对象类型中取出某些属性。全局泛型工具 Pick 可以从一个对象类型中取出某些属性。【二】： Omit 可以从一个对象类型中排出某些属性。全局泛型工具 Omit 可以从一个对象类型中排出某些属性。Pick 与 Omit 【TS内置全局类型】从类型对象中排出指定的属性类型，

ts中Pick与Omit的使用

LiliRush的博客

08-08

1368

PickOmit三、将两个声明类型合并成新的类型，使用。

学习TypeScript 之 Pick与泛型约束

weixin_51225684的博客

05-30

1083

已经定义好了数据类型，现在需要给其中一些加上id这个类型使用如下。

TS的内置类型-Pick,Omit

qq_40589140的博客

10-26

1030

今天我们聊聊Typescript的内置工具类型，其中有两个类型颇为有意思。那就是Pick (选取)和Omit (排除)。从类型对象中选取指定的属性类型从类型对象中排除指定的属性类型，得到剩余的。

TypeScript – Pick，Partial，ReturnType类型操作

ZTao-z的博客

09-05

1039

TypeScript 类型操作介绍

写TS效率大提升,TS常用内置工具类Omit、Pick、Partial、Required、Readonly、Exclude 、Extract、ReturnType、NonNullable

天渺(喵)工作室

05-29

6659

TS中常用的工具映射类型,让写TS时效率大大提升,避免无意义的重复性定义。 1.Omit 省略/剔除顾名思义可以剔除已定义对象中自己不需要的一部分形成新的定义类型。 interface UserObj { readonly name: string; // readonly 只读属性只能初始化定义不能二次赋值 age: number; id: number; sex: 0 | 1; address: string; weight: number;

TS高级类型 Record、Pick、Partial、Required、Readonly、Exclude、Extract、Omit、NonNullable 使用

刘运召的博客

10-19

1万+

TS高级类型 Record、Pick、Partial、Required、Readonly、Exclude、Extract、Omit、NonNullable 使用

ts中常用的几个工具类

wgh2820777641的博客

02-24

4796

TypeScript常用的几个工具类

在 TypeScript 中，Pick＜T, K＞是一个内置的工具类型（Utility Type）和其他TypeScript 自带的其他工具类型

chaoxxggg的博客

08-05

328

PickOmit适合处理组件 props 的精确类型PartialRequired适合表单编辑场景ReturnTypeParameters适合封装复杂函数类型工具类型可以无限组合，构建出精确的类型约束掌握这些工具类型可以显著提升 TypeScript 代码的类型安全性和开发效率。

ts的Pick,Omit,Partial,Required怎么使用？

寬真

08-27

968

是一个非常有用的工具类型，它允许你从一个已存在的类型中“挑选”出一个或多个属性，创建一个新的类型。这对于类型映射、条件类型以及创建基于现有类型的新类型时非常有用。是三个非常有用的内置工具类型，它们允许你以声明式的方式修改现有类型的属性。是TypeScript类型系统中一个非常强大的工具，能够帮助你以类型安全的方式处理复杂的类型映射问题。例如，你可能有一个复杂的对象，但只需要其部分属性用于某个特定的函数或组件。，你可以轻松地创建一个仅包含所需属性的新类型，从而保持类型安全和代码清晰度。的属性名的集合（通过。

ts pick

03-29

<think>嗯，用户问的是TypeScript中的Pick工具类型的使用和例子。首先，我需要确认自己对Pick的理解是否正确。Pick是TypeScript中的一个工具类型，用于从现有类型中选择部分属性来创建新类型。它的语法是Pick<T, K>，其中T是原始类型，K是要选择的属性键的联合类型。接下来，用户可能需要具体的例子来理解如何使用。比如，假设有一个用户信息类型User，包含id、name、email和age。如果只需要id和name，可以用Pick<User, 'id' | 'name'>来创建一个新类型。这样，新类型就只包含这两个属性。然后，我需要考虑实际应用场景，比如API响应中可能只需要部分字段，或者表单处理时只需要某些属性。这些例子能帮助用户更好地理解Pick的实用性。另外，用户可能想知道Pick和Omit、Partial等其他工具类型的区别。比如，Omit是排除某些属性，而Partial是将所有属性变为可选。不过用户的问题主要是关于Pick，所以可能需要简要提到这些以作对比，但重点还是放在Pick上。还要注意用户提供的引用中提到了Partial，引用[1]说Partial让所有属性变为可选。虽然用户的问题是关于Pick的，但可能需要确认是否需要将Pick与Partial结合使用的情况，比如Pick某些属性后再加上Partial，但这可能属于更高级的用法，用户可能暂时不需要，但可以提一下作为扩展。需要检查是否有常见的错误用法，比如属性键不存在于原始类型中，这时TypeScript会报错。例如，如果User没有address属性，Pick<User, 'address'>就会出错。这一点需要强调，帮助用户避免错误。另外，用户提供的引用中有关于Vim插件和自然语言生成的内容，但这些可能与当前问题无关，可以忽略。只需要关注引用[1]中提到的Partial，作为相关工具类型的例子，但用户的问题是关于Pick的，所以主要回答Pick，可能在对比时提到Partial。可能还需要提供代码示例，确保语法正确。比如定义User类型，然后用Pick创建BasicUser，并展示如何使用。代码中的类型是否正确，比如字符串、数字等是否匹配，是否需要可选属性等。用户可能还想知道Pick在函数参数或React组件props中的应用，比如提取部分props来创建子组件需要的类型。这也是一个实际的应用场景，可以举例说明。总结回答的结构：先介绍Pick的作用，语法，然后给出示例，再讨论应用场景，与其他工具类型的对比，常见错误，最后总结。这样结构清晰，便于用户逐步理解。需要确认所有的TypeScript语法是否正确，比如使用interface还是type，联合类型的写法是否正确，比如用单引号还是双引号，不过TypeScript中两者都可以，但保持示例一致。可能还需要提到Pick是内置在TypeScript中的，不需要额外安装，属于实用工具类型的一部分，帮助用户了解其来源。最后，生成相关问题，比如Pick和Omit的区别，Pick与Partial的结合使用，或者如何处理动态选择属性的情况。这些相关问题可以帮助用户进一步深入学习。</think>### TypeScript 中 Pick 工具类型详解 #### 1. 基本概念 `Pick` 是 TypeScript 提供的**实用工具类型**，用于从现有类型中**选择指定属性**生成新类型。其语法为： $$Pick<T, K>$$ 其中： - `T`：原始类型 - `K`：需要保留的属性键（字符串字面量类型或联合类型） #### 2. 使用示例 **场景**：用户信息类型需要提取基础字段 ```typescript interface User { id: number; name: string; email: string; age: number; } // 选择 id 和 name 属性 type BasicUser = Pick<User, 'id' | 'name'>; // 合法使用 const user: BasicUser = { id: 1, name: "Alice" }; // 错误示例（缺少 name） const invalidUser: BasicUser = { id: 2 }; // 报错: Property 'name' is missing ``` #### 3. 核心特性 1. **精确属性筛选** 只保留明确指定的属性，未选择的属性会自动排除 2. **类型安全校验** 若指定不存在的属性会触发编译错误： ```typescript type Invalid = Pick<User, 'address'>; // 报错：'address' does not exist in type 'User' ``` 3. **与 `Partial` 组合使用** 可将选择的属性设为可选（引用[1]中提到的`Partial`类型）： ```typescript type OptionalBasicUser = Partial<Pick<User, 'email' | 'age'>>; ``` #### 4. 应用场景 | 场景 | 示例 | |---------------------|-------------------------------| | API 响应数据过滤 | 提取接口返回的必要字段 | | 表单数据处理 | 创建仅含表单字段的类型 | | 组件 Props 类型约束 | 复用已有类型的部分属性（React/Vue） | #### 5. 相关工具类型对比 | 工具类型 | 行为 | 示例 | |-------------|-----------------------|-------------------------------| | `Pick<T,K>` | 保留指定属性 | `Pick<User, 'id'>` | | `Omit<T,K>` | 排除指定属性 | `Omit<User, 'password'>` | | `Partial<T>`| 所有属性设为可选 | `Partial<User>`（引用[1]） |