写点什么

【TypeScript】TS 自定义类型之对象属性必选、对象属性可选

作者:不叫猫先生
  • 2023-06-20
    北京
  • 本文字数:1513 字

    阅读完需:约 5 分钟

【TypeScript】TS自定义类型之对象属性必选、对象属性可选

前言

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

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

1.实现用到的 ts 基础

  • keyof T 生成新的类型,也就是联合字面量类型,组成的字面量类型是 T 的属性名称所组成的。

  • Pick 从定义的类型中指定一组属性生成新的类型

  • in 遍历枚举类型,可跟 keyof 一起使用做类型转换


 type A = {  name:string,  age:number } type changeA<T> = {   [K in keyof T]:string } let resultType:changeA<A> = {  name:'zhangsan',  age:'11' }
复制代码


  • Exclude 从联合类型 UnionType 中排除一个类型 ExcludedMembers

2.代码实现

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数据类型如下:


2.1 PartialByKeys

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


PartialByKeys<T, K extends keyof T> = {  [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]也就是取属性名idname属性值,即numberstring


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


{    id? : number | undefined ,   name? : string | undefined}
复制代码

2.2 Pick<T, Exclude<keyof T, K>>

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


  • 首先需要把可选属性去除,得到一个不包括可选属性的对象类型

  • 将剩余属性组成的对象类型与可选属性组成的对象类型交叉,得到最终结果


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


Exclude<keyof T, K>
复制代码


  • K 为'id' | 'name'

  • keyof T 为'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}
复制代码


最后合并得到最终结果

发布于: 刚刚阅读数: 5
用户头像

还未添加个人签名 2022-10-18 加入

前端领域优质创作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀!

评论

发布
暂无评论
【TypeScript】TS自定义类型之对象属性必选、对象属性可选_typescript_不叫猫先生_InfoQ写作社区