TypeScript 类型体操之 Pick

最近准备开始学习 TypeScript 类型体操,没想到第一个 Pick 就被难住了。

Pick 的使用

在 TypeScript 中,Pick 是一个内置的类型工具,用于从一个类型 T 中选择指定的属性 K,并生成一个新的类型。

Pick<T, K> 中,T 是原始类型,K 是一个由 T 的属性名组成的联合类型,表示我们要从 T 中选择哪些属性。

例如,假设有一个类型 Person

ts 复制代码
type Person = {
  name: string;
  age: number;
  gender: string;
};

我们可以使用 Pick 来选择 Person 类型中的部分属性,比如只选择 nameage 属性:

ts 复制代码
type SelectedPerson = Pick<Person, 'name' | 'age'>;

这样,SelectedPerson 类型将只包含 nameage 两个属性,而忽略了 gender 属性。

Pick 的实现

Pick 的实现很简单,只需要一行代码,但里面涉及的语法却不少

ts 复制代码
type MyPick<T, K extends keyof T> = {
  [key in K] : T[key]
}

1、keyof

keyof 是 TypeScript 中的一个关键字,用于获取一个类型的所有属性名组成的联合类型。

例如,我们可以使用 keyof 关键字来获取一个类型的所有属性名:

typescript 复制代码
type Person = { name: string; age: number };
type Keys = keyof Person; // "name" | "age"

在上述例子中,Keys 是一个联合类型,它包含了 Person 类型的所有属性名,即 "name""age"

2、extends

我们都知道 extends 表示继承,但是这里却不是继承的意思,而是泛型约束 。实际上,extends 可以用于约束泛型类型参数、定义类型继承关系和条件类型的判断。

extends 用于约束泛型类型参数,例如,T extends SomeType 表示泛型类型参数, T 必须是 SomeType 或其子类型。

3、in

在映射类型中,in 关键字用于遍历一个类型的属性名,并对每个属性进行相应的操作。

例如,我们可以使用 in 关键字将一个类型的所有属性变为可选属性:

typescript 复制代码
type Person = { name: string; age: number };
type OptionalPerson = { [K in keyof Person]?: Person[K] };

type Result = OptionalPerson; // { name?: string; age?: number; }

在上述例子中,OptionalPerson 是一个映射类型,它遍历 Person 类型的属性名,并将每个属性变为可选属性。

需要注意的是,这里的 K 只是一个占位符,你可以使用任意合法的标识符来代替。例如,可以使用 PProp 等等。

总结

综上,在 Pick 的实现中,我们使用了泛型类型参数 TK,其中 T 表示原始类型,K 表示要选择的属性名联合类型。我们使用 keyof T 获取 T 的所有属性名组成的联合类型,然后使用 in 关键字进行属性遍历。

在遍历过程中,我们将每个属性名 key 作为索引类型,并使用 T[key] 获取对应属性的类型。最终,我们通过这个遍历过程生成了一个新的类型,该类型包含了 T 中指定属性的类型。

相关推荐
KaMeidebaby5 小时前
卡梅德生物技术快报|骆驼纳米抗体:从原核表达、高通量测序到分子对接全流程实现
前端·数据库·其他·百度·新浪微博
子兮曰7 小时前
Node.js v26.1.0 深度解读:FFI、后量子密码与调试器的进化
前端·后端·node.js
测试员周周8 小时前
【Appium 系列】第06节-页面对象实现 — LoginPage 实战
开发语言·前端·人工智能·python·功能测试·appium·测试用例
西洼工作室9 小时前
前端直传OSS服务端签名(Policy+Signature)/STS临时凭证
前端·文件上传·oss
你很易烊千玺9 小时前
日常练习-数组 字符串常用的场景
前端·javascript·字符串·数组
weixin1997010801610 小时前
[特殊字符] RESTful API 接口规范详解:构建高效、可扩展的 Web 服务(附 Python 源码)
前端·python·restful
存在的五月雨10 小时前
Vue3项目一些语法
前端·javascript·react.js
nashane11 小时前
HarmonyOS 6学习:Web组件同层渲染事件处理与智能长截图实现
前端·学习·harmonyos·harmonyos 5
大家的林语冰11 小时前
Node 2026 发布,JS 三大新功能上线,最后一个奇偶版本
前端·javascript·node.js