TS中断言的使用、联合类型和交叉类型

150 阅读2分钟

引言

  • 有些属性我们并不知道是什么类型,那这个时候我就可以采用断言的方式

联合类型只能取到公共的方法或者属性

image.png

我们如果直接赋值,会根据赋予的值来进行推断

image.png

有的时候我也不知道具体值是什么,我也不想赋值,我就想调比如string上的方法,我们可以使用as关键字

image.png

  • 表示n一定是个字符串
  • 风险你要自己承担,万一n是个数字,那么后果只能自己承担

不能乱断言

image.png

  • 这种断言是不可以的,因为从number和string的联合类型转换成boolean类型是错误的,因为两种类型不能充分重叠,这种断言是不安全的

如果我们非要断言成boolean

  • 我们可以采用一种极端的方法

image.png

  • 我们先把n断言成any,然后再断言成boolean,这种断言就比较安全了,这叫双重断言,一般不建议使用,因为会改变类型关系

应用场景

image.png

  • 将ele断言成HTMLElement,这样我们就可以直接取style属性。但是HTMLElement还可能为null,所以为null的风险你自己承担

上述写法比较麻烦,我们可以用一种简便方法

  • ! 表示非空断言,表示肯定不为空

image.png

另一种断言写法

image.png

三种断言方式,我们一般用as和!比较多

类型还可以是字面量的

image.png

  • 这种情况你只能赋值1

一般我们这样使用

image.png

  • type类型别名
  • 可能你会疑惑,这不是枚举嘛,其实不是,这种方式和枚举的区别是,枚举拿的是值,这种拿的是类型,不是一个概念

联合类型

image.png

  • 我们在ts中把联合类型称之为并集 |
  • Person3既包含Person1的类型,也包含Person2的类型
  • 我们使用用Person3类型作为描述某个变量的类型,你既可以只赋Person1也可以只是赋Person2,也可以赋全部类型的值,但是当你复制完,你从Person3上取值的话,你只能取Person1和Person2的共有属性

交叉类型

image.png

  • 我们在ts中把交叉类型称之为交集 &
  • 要满足两方的类型
  • Person4类型描述的变量,你赋值必须满足全部的类型
  • 取值的时候,你就可以取出全部的值
  • person4的值既可以赋值给person1,也可以单独赋值给person2
  • 就相当于,person4是你俩的交集,那么我可以单独赋值给你们任何一人