前言
==
TS中实现对象属性必选、对象属性在开发过程中十分常见,前端在传参数时,有些参数比必传,有些是选传,我们可以定一个多个对象来实现传参,但是这让代码变得冗余。我们可以通过TS定义数据类型来实现。
一、把对象类型的指定key变成可选
=================
1.实现用到的ts基础
type A = {
name:string,
age:number
}
type changeA<T> = {
[K in keyof T]:string
}
let resultType:changeA<A> = {
name:'zhangsan',
age:'11'
}
type PartialByKeys<T, K extends keyof T> = {
[P in K]?: T[P];
} & Pick<T, Exclude<keyof T, K>>;
type Simplity<T> = { [P in keyof T]: T[P] }
type Info = {
name: string,
id: number,
age: number
class: string
}
type resultType = Simplity<PartialByKeys<Info, 'id'|'name'>>
resultType
数据类型如下:
首先看PartialByKeys,实现了可选属性,可选属性实现使用了?
,主要通过[P in K]?: T[P]
语句实现。
PartialByKeys<T, K extends keyof T> = {
[P in K]?: T[P];
}
'id'|'name'
'name'| 'id'| 'age'| 'class'
id
,name
id
,name
属性值,即number
,string
所以PartialByKeys的目的是将对象类型指定的key抽取出来最为可选,生成一个新的对象,最后得到的结果如下:
{
id? : number | undefined ,
name? : string | undefined
}
上面得到了可选属性的对象类型,怎么把除了可选属性的其他属性对象类型与可选属性对象类型合并呢,我们最终结果是要一个包括info
对象中所有属性的对象类型。思路如下:
使用TS中的Exclude
工具类型,从联合类型中去除指定属性,最终得到联合类型。
Exclude<keyof T, K>
'id' | 'name'
'name'| 'id'| 'age'| 'class'
接着使用Pick
工具类型,从对象的类型(info
)中抽取出指定类型的键值,生成一个新的对象类型。
Pick<T, Exclude<keyof T, K>>
后半部分的目的主要是抽取出来必填属性组成一个新的对象,得到结果:'age' | 'class'
,然后通过Pick生成新对象得到如下对象类型:
{
age:number,
class:string
}
最后将两个对象类型交叉就得到了最终结果。
二、实现属性必填
========
实现属性必填与属性选填的逻辑基本差不多,主要是在抽取指定属性的生成新的对象时有一些区别。
1.代码实现
type RequiredByKeys<T, K extends keyof T> = {
[P in K]-?: T[P];
} & Pick<T, Exclude<keyof T, K>>;
type Simplity<T> = { [P in keyof T]: T[P] }
type Info = {
name: string,
id: number,
age?: number
class?: string
}
type resultType = RequiredByKeys<PartialByKeys<Info, 'age'|'class'>>
读,-
号可以移除可选和只读readonly
,所以将可选的属性进行传参。 实现思路具体如下:
RequiredByKeys<T, K extends keyof T> = {
[P in K]-?: T[P];
上面代码得到结果是:
{
name:string,
id:number
}
接下来看这个:
Pick<T, Exclude<keyof T, K>>;
得到结果如下:
{
age:number,
class:string
}
最后合并得到最终结果
我正在参与2023腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。