Vue3—16—TypeScript之类型注释；类型推导；数据类型；类型别名；类型断言；非空断言；可选链；类型缩小；this问题；

一、ts介绍

注意类型注释和类型推导的区别：

类型注释就是我们给js的变量名加类型检测的写法，它的固定写法就是这样；

类型推导是ts会默认推导然后加一个类型检测；

二、js和ts都有的数据类型

js和ts都有的数据类型：

1.number类型
2.boolean类型
3.string类型
4.array类型
5.object类型
6.symbol类型
7.null 和undefind类型
8.对象类型
9.函数类型

ts独有的数据类型：

1.any类型
2.unknown类型
3.never类型
void类型

1.number

0b 0o 0x

4.array 第一种和第二种方式，使用类型注释表示，这是个数组，且数组的元素必须是string类型；

5.object 使用：object类型注释无法获取数据，也不可以修改数据，应该使用{a：number，b：string}来做类型注释

2.6.symbol类型

2.8对象类型也就是刚刚说的和object类型的区别

2.9函数类型 js中是用function关键字来定义函数，ts中使用（） =》void表示一个函数数据类型的类型注释

(1)参数的类型注释

（2）返回值的类型注释

（3）匿名函数的参数

（4）使用（） =》void表示一个必须传入一个函数

void表示不返回任何值，当然这个void可以换成number、string等；

（5）函数参数是可以使用？进行可选类型的，但是记得可选类型一定要放在必选类型的后面；

（6）默认参数，像es6一样，可以给函数参数一个默认参数

（7）剩余参数，不就是可变参数嘛，使用拓展运算符

（8）函数重载

上面是函数申明，下面是函数体；

三、ts独有的数据类型

ts独有的数据类型：

1.any类型
2.unknown类型
3.never类型
4.void类型
5.tulpe元组类型
6.联合类型
7.可选类型
8.字面量类型

3.1 any

3.2 unknown

any类型的变量可以赋值给任何其他类型的变量；

unknown类型的变量只可以赋值给any或unknown类型的变量，赋值给其他类型会报错；

所以我们一般用unknow，any太灵活了，不太好，会像以前的js一样不安全；

3.3void类型

3.4nerver类型

void表示返回值类型是void，nerver表示不返回任何东西；

3.5 元组类型可以确定每个数组中元素的类型；

数组是string[]

元组是【string，string，number】

3.6可选参数一定要放在必选参数后面；

?是指我们不确定是否会传入这个参数，!即非空断言是指我们一定会给这个参数赋值

3.7联合类型

3.8字面量类型

字面量类型必须和联合类型结合在一起使用才有意义；

可以确定，用户必须只能从这几个选项赋值；

四、ts中的类型别名

type关键字用于定义类型别名；

五、类型断言

六、非空断言确定我们传入的参数必须是有值的，不能是空的

?是指我们不确定是否会传入这个参数，!即非空断言是指我们一定会给这个参数赋值

七、可选链

可选类型：   ？：
非空断言：   ！：
可选链：      ？.

可选类型表示，定义interface时或作为形参时，这个东西可以有可以无，一般放在最后面。
非空断言表示，这个参数一定存在，建议少用，万一后端没返回不存在呢。
可选链是对象的链式调用时比如a.foo.bar.d可以用到，如果某一个属性不存在了，直接返回undefined；

可选链、！！、？？都是es11的特性