个人主页：不叫猫先生 ♂️ 作者简介：2022年度博客之星前端领域TOP 2，前端领域优质作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！ 优质专栏：vue3从入门到精通、TypeScript从入门到实践 资料领取：前端进阶资料以及文中源码可以找我免费领取 前端学习交流：博主建立了一个前端交流群，汇集了各路大神，一起交流学习，期待你的加入！(文末有我wx或者私信)。
目录
专栏介绍前沿一、把对象类型的指定key变成可选1.实现用到的ts基础2.代码实现2.1 PartialByKeys2.2 Pick
二、实现属性必填1.代码实现
专栏介绍
TypeScript从入门到实践专栏是博主在学习和工作过程中的总结，内容会不断进行精进，欢迎订阅哦，学会TS不迷路。
TS系列标题基础篇TS入门（一）基础篇TS类型声明（二）基础篇TS接口类型（三）基础篇TS交叉类型&联合类型（四）基础篇TS类型断言（五）基础篇TS类型守卫（六）进阶篇TS函数重载（七）进阶篇TS泛型（八）进阶篇TS装饰器（九）进阶篇TS自定义类型之对象属性必选、对象属性可选
前沿
TS中实现对象属性必选、对象属性在开发过程中十分常见，前端在传参数时，有些参数比必传，有些是选传，我们可以定一个多个对象来实现传参，但是这让代码变得冗余。我们可以通过TS定义数据类型来实现。
一、把对象类型的指定key变成可选
1.实现用到的ts基础
keyof T 生成新的类型，也就是联合字面量类型，组成的字面量类型是T的属性名称所组成的。 Pick 从定义的类型中指定一组属性生成新的类型 in 遍历枚举类型，可跟keyof一起使用做类型转换
type A = {
name:string,
age:number
}
type changeA
[K in keyof T]:string
}
let resultType:changeA = {
name:'zhangsan',
age:'11'
}
Exclude 从联合类型UnionType中排除一个类型ExcludedMembers
2.代码实现
type PartialByKeys
[P in K]?: T[P];
} & Pick
type Simplity
type Info = {
name: string,
id: number,
age: number
class: string
}
type resultType = Simplity
resultType数据类型如下：
2.1 PartialByKeys
首先看PartialByKeys，实现了可选属性，可选属性实现使用了?，主要通过[P in K]?: T[P]语句实现。
PartialByKeys
[P in K]?: T[P];
}
T 是 InfoK是'id'|'name'keyof T是'name'| 'id'| 'age'| 'class'P in K 中 P 是 K 的每一项，即id,nameT[P]也就是取属性名id，name属性值，即number，string
所以PartialByKeys的目的是将对象类型指定的key抽取出来最为可选，生成一个新的对象，最后得到的结果如下：
{
id? : number | undefined ,
name? : string | undefined
}
2.2 Pick
上面得到了可选属性的对象类型，怎么把除了可选属性的其他属性对象类型与可选属性对象类型合并呢，我们最终结果是要一个包括info对象中所有属性的对象类型。思路如下：
首先需要把可选属性去除，得到一个不包括可选属性的对象类型将剩余属性组成的对象类型与可选属性组成的对象类型交叉，得到最终结果
使用TS中的Exclude工具类型，从联合类型中去除指定属性，最终得到联合类型。
Exclude
K为'id' | 'name'keyof T为'name'| 'id'| 'age'| 'class'
接着使用Pick工具类型，从对象的类型（info）中抽取出指定类型的键值，生成一个新的对象类型。
Pick
后半部分的目的主要是抽取出来必填属性组成一个新的对象，得到结果：'age' | 'class'，然后通过Pick生成新对象得到如下对象类型：
{
age:number,
class:string
}
最后将两个对象类型交叉就得到了最终结果。
二、实现属性必填
实现属性必填与属性选填的逻辑基本差不多，主要是在抽取指定属性的生成新的对象时有一些区别。
1.代码实现
type RequiredByKeys
[P in K]-?: T[P];
} & Pick
type Simplity
type Info = {
name: string,
id: number,
age？: number
class？: string
}
type resultType = RequiredByKeys
得到结果如下： 用问号设置可选只读，-号可以移除可选和只读readonly，所以将可选的属性进行传参。 实现思路具体如下：
去除可选属性得到新的对象类型（必填属性对象）抽取出除去必填的属性生成新的代谢（可选属性对象）交叉合并
RequiredByKeys
[P in K]-?: T[P];
上面代码得到结果是：
{
name:string,
id:number
}
接下来看这个：
Pick
得到结果如下：
{
age:number,
class:string
}
最后合并得到最终结果
发表评论