typescript映射类型

ts映射类型简介

TypeScript中的映射类型(Mapped Type)是一种高级类型,它允许我们基于现有类型创建新的类型,同时对新类型的每个属性应用一个转换函数。通过使用映射类型,我们可以方便地对对象的属性进行批量操作,例如将所有属性的类型转换为另一种类型,或者为所有属性添加额外的修饰符。

ts类型映射

类型映射:基于旧类型创建新类型(对象类型).减少重复,提升开发效率

比如,类型ClassKey有x/y/z
另一类型myClass中也有x/y/z,并且MyClass中xyz类型相同
如下示例

typescript映射类型_第1张图片

根据类型别名创建映射类型

这样写没什么大问题,但是x/y/z重复写了两次,是冗余代码,像这种情况,就可以使用映射类型,来进行简化
示例如下
typescript映射类型_第2张图片
tips:

  • 映射类型是基于索引签名类型的,所以该语法类似于索引签名,也是用了[]符号
  • key in ClassKey 表示key可以是PropKeys类型别名中的任意一个,类似于forin(let k in obj)
  • 使用映射类型创建的新对象类型MyClass 和MyClassNew结构完全相同
  • 映射类型只能在类型别名中使用,不能在接口中使用

使用映射类型创建的新对象类型MyClass 和MyClassNew结构完全相同
示例如下

typescript映射类型_第3张图片

根据对象类型创建映射类型

映射类型出来根据联合类型创建新类型外,还可以根据对象类型来创建
typescript映射类型_第4张图片
这段代码首先定义了两个类型别名 MyClass 和 MyClassNew,其中 MyClass 是一个对象类型,具有三个属性 a、b 和 c,它们的类型分别是 number、string 和 boolean。而 MyClassNew 是一个映射类型,基于 MyClass 中的每个属性键创建一个新的属性,属性值为 number | string | boolean 类型。

接着创建了两个变量 myClass 和 myClassNew,并分别指定它们的类型为 MyClass 和 MyClassNew。然后初始化了这两个变量的值,都为 { a: 1, b: “2”, c: true }。由于这个值符合 MyClass 和 MyClassNew 的定义,所以可以将它赋值给这两个变量。

这段代码演示了如何使用类型别名和映射类型来定义和使用对象类型,以及如何创建符合这些类型的变量。通过使用映射类型,我们可以更方便地操作对象的属性类型,例如将对象的所有属性转换为另一种类型、为对象的所有属性添加默认值等等。

tips:

  1. 首先,先执行keyof MyClass获取到对象类型MyClass中所有键的联合类型即; ‘a’|‘b’|‘c’
  2. 然后key in 就表示key可以说MyClass中所有键名称中的任意一个

你可能感兴趣的:(typescript,typescript,javascript,前端,typescript映射类型,ts映射类型详解,ts映射类型声明,对象映射类型)