【TypeScript】TS 自定义类型之对象属性必选、对象属性可选
前言
TS 中实现对象属性必选、对象属性在开发过程中十分常见,前端在传参数时,有些参数比必传,有些是选传,我们可以定一个多个对象来实现传参,但是这让代码变得冗余。我们可以通过 TS 定义数据类型来实现。
一、把对象类型的指定 key 变成可选
1.实现用到的 ts 基础
keyof T 生成新的类型,也就是联合字面量类型,组成的字面量类型是 T 的属性名称所组成的。
Pick 从定义的类型中指定一组属性生成新的类型
in 遍历枚举类型,可跟 keyof 一起使用做类型转换
Exclude 从联合类型 UnionType 中排除一个类型 ExcludedMembers
2.代码实现
resultType
数据类型如下:
2.1 PartialByKeys
首先看 PartialByKeys,实现了可选属性,可选属性实现使用了?
,主要通过[P in K]?: T[P]
语句实现。
T 是 Info
K 是
'id'|'name'
keyof T 是
'name'| 'id'| 'age'| 'class'
P in K 中 P 是 K 的每一项,即
id
,name
T[P]也就是取属性名
id
,name
属性值,即number
,string
所以 PartialByKeys 的目的是将对象类型指定的 key 抽取出来最为可选,生成一个新的对象,最后得到的结果如下:
2.2 Pick<T, Exclude<keyof T, K>>
上面得到了可选属性的对象类型,怎么把除了可选属性的其他属性对象类型与可选属性对象类型合并呢,我们最终结果是要一个包括info
对象中所有属性的对象类型。思路如下:
首先需要把可选属性去除,得到一个不包括可选属性的对象类型
将剩余属性组成的对象类型与可选属性组成的对象类型交叉,得到最终结果
使用 TS 中的Exclude
工具类型,从联合类型中去除指定属性,最终得到联合类型。
K 为
'id' | 'name'
keyof T 为
'name'| 'id'| 'age'| 'class'
接着使用Pick
工具类型,从对象的类型(info
)中抽取出指定类型的键值,生成一个新的对象类型。
后半部分的目的主要是抽取出来必填属性组成一个新的对象,得到结果:'age' | 'class'
,然后通过 Pick 生成新对象得到如下对象类型:
最后将两个对象类型交叉就得到了最终结果。
二、实现属性必填
实现属性必填与属性选填的逻辑基本差不多,主要是在抽取指定属性的生成新的对象时有一些区别。
1.代码实现
得到结果如下:
用问号设置可选只读,-
号可以移除可选和只读readonly
,所以将可选的属性进行传参。实现思路具体如下:
去除可选属性得到新的对象类型(必填属性对象)
抽取出除去必填的属性生成新的代谢(可选属性对象)
交叉合并
上面代码得到结果是:
接下来看这个:
得到结果如下:
最后合并得到最终结果
版权声明: 本文为 InfoQ 作者【不叫猫先生】的原创文章。
原文链接:【http://xie.infoq.cn/article/90295ac51c9cfdfb573232049】。文章转载请联系作者。
评论