淡水珍珠最好的叫什么 【TypeScript】TS自定义类型之对象属性必选、对象属性可选

前言

==

TS中实现对象属性必选、对象属性在开发过程中十分常见，前端在传参数时，有些参数比必传，有些是选传，我们可以定一个多个对象来实现传参，但是这让代码变得冗余。我们可以通过TS定义数据类型来实现。

一、把对象类型的指定key变成可选

=================

1.实现用到的ts基础

keyof T 生成新的类型，也就是联合字面量类型，组成的字面量类型是T的属性名称所组成的。Pick 从定义的类型中指定一组属性生成新的类型in 遍历枚举类型，可跟keyof一起使用做类型转换代码语言：jascript复制 type A = { name:string, age:number } type changeA = { [K in keyof T]:string } let resultType:changeA = { name:'zhangsan', age:'11' }Exclude 从联合类型UnionType中排除一个类型ExcludedMembers2.代码实现代码语言：jascript复制type PartialByKeys = { [P in K]?: T[P]; } & Pick; type Simplity = { [P in keyof T]: T[P] } type Info = { name: string, id: number, age: number class: string } type resultType = Simplity

resultType数据类型如下：

2.1 PartialByKeys

首先看PartialByKeys，实现了可选属性，可选属性实现使用了?，主要通过[P in K]?: T[P]语句实现。

代码语言：jascript复制PartialByKeys = { [P in K]?: T[P]; }T 是 InfoK是'id'|'name'keyof T是'name'| 'id'| 'age'| 'class'P in K 中 P 是 K 的每一项，即id,nameTP也就是取属性名id，name属性值，即number，string

所以PartialByKeys的目的是将对象类型指定的key抽取出来最为可选，生成一个新的对象，最后得到的结果如下：

代码语言：jascript复制{ id? : number | undefined , name? : string | undefined }2.2 Pick

上面得到了可选属性的对象类型，怎么把除了可选属性的其他属性对象类型与可选属性对象类型合并呢，我们最终结果是要一个包括info对象中所有属性的对象类型。思路如下：

首先需要把可选属性去除，得到一个不包括可选属性的对象类型将剩余属性组成的对象类型与可选属性组成的对象类型交叉，得到最终结果

使用TS中的Exclude工具类型，从联合类型中去除指定属性，最终得到联合类型。

代码语言：jascript复制ExcludeK为'id' | 'name'keyof T为'name'| 'id'| 'age'| 'class'

接着使用Pick工具类型，从对象的类型（info）中抽取出指定类型的键值，生成一个新的对象类型。

代码语言：jascript复制Pick

后半部分的目的主要是抽取出来必填属性组成一个新的对象，得到结果：'age' | 'class'，然后通过Pick生成新对象得到如下对象类型：

代码语言：jascript复制{ age:number, class:string }

最后将两个对象类型交叉就得到了最终结果。

二、实现属性必填

========

实现属性必填与属性选填的逻辑基本差不多，主要是在抽取指定属性的生成新的对象时有一些区别。

1.代码实现

代码语言：jascript复制type RequiredByKeys = { [P in K]-?: T[P]; } & Pick; type Simplity = { [P in keyof T]: T[P] } type Info = { name: string, id: number, age？: number class？: string } type resultType = RequiredByKeys

读，-号可以移除可选和只读readonly，所以将可选的属性进行传参。 实现思路具体如下：

去除可选属性得到新的对象类型（必填属性对象）抽取出除去必填的属性生成新的代谢（可选属性对象）交叉合并代码语言：jascript复制RequiredByKeys = { [P in K]-?: T[P];

上面代码得到结果是：

代码语言：jascript复制{ name:string, id:number }

接下来看这个：

代码语言：jascript复制Pick;

得到结果如下：

代码语言：jascript复制{ age:number, class:string }

最后合并得到最终结果

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！