type 类型别名

image.png
image.png
image.png

？ 可选类型

表示一个参数、属性是可有可没有的，如下图。多用于函数、对象
image.png

| 联合类型

联合类型，就是什么类型 或 什么类型，同时匹配多个类型
image.png
image.png
image.png （只有string有toUpperCase方法）
image.png

一个参数是可选（？）的，本质上表示这个参数是和undefined的联合类型
image.png
image.png

可以定义一个联合类型
image.png

& 交叉类型

image.png
image.png
image.png
表示多个对象属性合并，才能通过验证

=================

as 类型断言

把xx 当做 xxx
image.png
image.png

有的类型比较宽泛，不一定有具体的某个属性。如下图src报错了，不一定所有元素都有src属性。
image.png

此时如果用as，帮助ts进一步缩小类型范围，就能正确识别属性，如下图告诉TS这个是HTML图片元素，它就知道是有src属性的。
image.png

案例：父类型 as 子类型

image.png
image.png 假如学生类有个自己的方法学习ing，人类是无法直接使用的，因为不确定有没有

image.png 但如果类型断言，告诉TS这个算是学生类，就没问题

案例：暂时逃过检测（不推荐）

先把一个类型as any或unknown，再as成其他类型，也能通过编译，但不推荐，因为会造成很大隐患
image.png

！非空类型断言

image.png
上面的看上去是没报错的，但是如果生成默认的TS配置tsconfig.json就会报错，如下图，因为默认配置是不允许这种可能会错误的情况（undefined 是没有length属性）
image.png

此时可以用if判断，就不会报错。
image.png
或者告诉TS我后面一定会传值

image.png

类型缩小

就是缩小类型检测的范围，让TS从查找父类型，缩小到直接查找子类型或孙子类型，更好识别类型和对应的属性方法。
image.png
image.png

typeof 判断类型缩小

image.png
比如下图，id类型是一个数值或者文本，直接用toUpperCase会有问题，因为number没有这个方法
image.png

但是通过 typeof 判断后，帮助TS缩小了检测范围，只需要检测string就可以了
image.png

判断相等缩小

我们可以使用Switch或者相等的一些运算符来表达相等性（比如===, !==, ==, 和 != ）

比如定义了一个字面量类型
image.png

通过相等判断，缩小了联合类型的范围
image.png
image.png

也可以通过switch缩小。
image.png

instanceof 是否是某个类的一个实例

判断date参数是否是内部类日期Date 的一个实例，也能帮助缩小
image.png

image.png

in 是否是某个对象的一个属性

定义鱼类型 和 狗类型
image.png

声明一个鱼，类型是鱼类，有游泳的方法
image.png

这里判断参数animal，是否有一个游泳的属性，来缩小检测范围
image.png

===================

in 循环

相当于for循环

  1. // for(k in z)
  2. type Coord = {
  3.     [K in 'x' | 'y']: number;
  4. };
  6. // 得到
  7. // type Coord = {
  8. //  x: number;
  9. //  y: number;
  10. // }

===================

？. 可选链（ES11）

image.png
虽然可选链操作是ECMAScript提出的特性，但是和TypeScript一起使用更好

下面定义了一个人类，有一个name属性，和一个可选的friend属性
image.png

image.png

如果直接使用，会报错，说friend可能会是undefined。
image.png

当然你可以给他非空断言，不会报错，但是不严谨，而且你没有太多时间去看别人源码是怎么设计的。
image.png
如果别人压根没有friend，非空类型断言会报错的。
image.png
image.png

正常你只能这样判断，但是如果对象嵌套很深，这样不行。
image.png

此时使用可选链很合适，如果friend属性有值，就继续往后读取。如果没有就直接返回undefined，后面的都不执行，不会导致抛出异常
image.png
image.png（也不会报错）
image.png（末尾不能随便加问号，除非要用后面的属性）
image.png

！！ 转布尔类型（ES）

！是把一个值转为布尔类型，并取反。
！！就是把一个值转为布尔类型，并取反再取反，相当于显示自己本身。
相当于
image.png

？？空值合并操作符（ES11）

image.png
相当于
image.png

和 || 有点像，但||主要还是用于 if 里面的条件判断