TypeScript 类型注解（一）

一、TypeScript 类型注解

1、什么是TpyeScript类型注解

        - 是否还记得TypeScript的两个重要特性？

                  - 类型系统、适用于任何规模

        - 可以说，TS的类型系统是TS最重要的功能；那么什么是类型注解呢？其实就是在声明变量时，将变量的类型一同声明出来 

                let 变量.类型=“值”

                简写：let 变量 = 值

                当省略.类型时，系统会自动根据当前值确定当前变量的类型

2、类型注解的优势

        - 当使用类型注解之后，变量值的类型将不能发生改变，否则就会报错，这样就可以保证代码的严谨性和规范性

        

         - 当使用类型注解之后，在变量后面敲一个.运算符，可以发现当前数据类型下的方法和属性都会帮助你提示出来

        

3、vscode错误提示插件

如果想让vscode的错误提示更明显一些，可以下载插件帮助完成

        

可以发现，开启之后，错误更加直观

        

TypeScript中的类型注解有那些

1、TS中支持的类型有哪些？

        可以将TS中常见的基础类型分两类：

                - JavaScript已有类型

                        简单类型：number、string、boolean、null、undefined

                        复杂类型：数组、对象、函数（在ts中，将object类型做了更细致的划分）、

                - TypeScript新增类型

                        联合类型、自定义类型（类型别名）、接口、元祖、字面量类型、枚举、void…

一、TypeScript类型约束 - 简单类型

        1、TS已有类型中的简单类型

                对于简单类型其实很容易理解和掌握，跟number一样，可以尝试一下其他简单类型

                

2、解决一个问题

        在复杂类型之前，来看一个现象，将main.ts复制一份出来，会发现ts文件中咱们之前的变量都会报错

       

        原因就是ts环境下，程序认为在同一个目录下的文件都是同一块作用域，所以变量出错

        解决办法：将代码套在花括号（{}块级作用域）中，将变量的作用域隔绝开

        

这个错误，声明了变量未使用， 使用一下就不会报错了。

二、TypeScript类型约束 - 数组

1、TS已有类型中的负载类型 - 数组

        数组类型的定义还是有点特殊的，因为数组的定义不是定义变量本身是数组类型，而是定义数组内部可以存放什么类型的数据

                - 数组定义方式 1：

                        let arr.number[]=[]，

                        number[]是约束数组中存储的数据必须是数字类型

                - 数组 定义方式 2：

                        let arr.Array<string>=[] ；利用了泛型的知识点，后面会详细讲解泛型

三、TypeScript类型约束 - 联合类型

        学习完数组的定义方法之后，肯定有一个问题，就是如果数组中存在的数据类型不止一种怎么办这就是需要用到联合类型了：

       联合类型其实就是通过 | 运算符，将多个类型隔开，已达到都能兼容的目的

                let arr.(number | string)[]=[]

                当然，如果还有更多类型，就可以通过|去连接即可

        联合类型除了可以在定义数组时使用，在定义普通变量时也可以使用

                let params:number|null=null

         比如咱们之前在做练习时，经常使用变量接收一个计时器，其实计时器返回的结果是一个数字，是计时器的id。但是咱们在定义变量的时候经常定义成null，所以这时候就可以通过联合类型解决这个问题：

        

总结：其实联合类型并不是一个新类型，只是多个类型的结合而已！

四、TypeScript类型约束 - 类型别名

想要知道什么是类型别名，大家来看一下下面这种情况，比如我有一个数组，里边可以存放number/string/boolean/null/undefined:

        let arr: ( number | string | boolean | null | undefined )[] = [ ];

好的，比如现在我有多个这样的数组，你的代码结构就会变成：

        let arr: ( number | string | boolean | null | undefined )[] = [ ];

        let arr: ( number | string | boolean | null | undefined )[] = [ ];

        let arr: ( number | string | boolean | null | undefined )[] = [ ];

虽然说这么写也没什么问题，但是代码质量看起来确实很low，那么如果我能把类型当做一个变量存储起来，是不是可以极大的简写代码结构呢？

 类型别名 type ArrType = ( number | string | boolean | null | undefined )[]；

        let arr: ArrType = [ ];

        let arr: ArrType = [ ];

        let arr: ArrType = [ ];

类型别名就是使用关键词type，把你的其他类型封装成一个变量，然后使用类型别名去定制变量的类型！

当然，类型别名可以很灵活的去定制：

        type ArrType = number | string | boolean | null | undefined;

        let arr: ArrType[] = [ ];

提示：类型别名建议首字母大写

五、TypeScript类型约束--函数

函数创建好之后需要参数以及有返回值，在TS中就需要对参数和返回值做类型限制：

        - 函数声明语法格式：

                function 函数名(参数1: 类型, 参数2: 类型)：返回值类型 { 函数体 }

                 function count( param1: number, param2: number ): number { return a + b; }

        - 函数表达式语法格式：

                let 函数名 = function(参数1: 类型, 参数2: 类型)：返回值类型 { 函数体 }

                let count = function( param1: number, param2: number ): number { return a + b; }

        - 箭头函数语法格式：

                let 函数名 = (参数1: 类型, 参数2: 类型)：返回值类型 => { 函数体 }

                let count = ( param1: number, param2: number ): number => { return a + b; }

注意：TS下的箭头函数就算只有一个参数，也不能省略小括号！否则会有语法错    误。

        - 函数参数不固定的情况

                对于有些函数，某些参数的情况可能不固定，有可能传有可能不传，如果不做处理的话，程序会报错

                

                针对这种情况，可以使用 “？”来定制可选参数：

                

                并且注意，在可选参数之后，不能再出现必选参数了：

                

                对于ES6中的 reset 参数，当然也需要定义类型：

                

                reset就是一个数组，所以规定你程序必须的数组类型即可

        - 函数的类型别名

                函数的类型别名其实跟咱们以前的类型别名是一个道理，如果你需要定义多个参数相同、类型相同、返回值类型相同的函数，你的代码会变成：

                                

                针对这种情况，可以将参数类型以及返回值类型进行别名封装，简化代码结构：

                语法： type 函数类型别名 = (参数1: 类型，参数2：类型) => 返回值类型

                

                注意：函数的类型别名仅支持函数表达式写法，不支持函数声明写法！        

        - void类型

                在定义函数时，并不是每一个函数都会有返回值，有些函数是没有返回值的，那么当没有返回值的时候，一个函数的返回值类型应该是什么呢？

                

                通过一个没有返回值的函数大家可以发现，函数的返回值是 void , 所以，对于没有返回值的函数，他的默认返回值类型是void。

                当然， 你可以主动指定他的返回值类型是void。