【TS类型注解（上）】

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、TS类型注解

1.什么是TypeScript类型注解？

是否还记得TypeScript的两个重要特性？
——类型系统、适用于任何规模。
可以说，TS的类型系统是TS最重要的功能；那么什么是类型注解呢？其实就是在声明变量时，将变量的类型一同声明出来：
let 变量: 类型 = “值”;
也可以简写成： let 变量 = 值;
当省略 :类型 时，系统会自动根据当前值确定当前变量的类型！

2. 类型注解的优势

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

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

3. vscode错误提示插件

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

开启之后，错误更加直观

二、TypeScript中的类型有哪些

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

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

• JavaScript已有类型
  简单类型: number/string/boolean/null/undefined
  复杂类型: 数组、对象、函数等

• TypeScript新增类型
  联合类型
  自定义类型(类型别名)
  接口
  元祖
  字面量类型
  枚举
  void
  . . .

三、TypeScript类型约束

（1）简单类型

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

对于简单类型其实很容易理解和掌握，跟number一样

2. 解决一个问题

如果将main.ts复制一份出来，会发现ts文件中之前的变量都报错了：

原因就是ts环境下，程序认为在同一个目录下的文件都是同一块作用域，所以变量出错了。
当然解决办法也很简单，将你的代码套在花括号（{}块级作用域）中，将变量的作用域隔绝开来就行了

（2）数组

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

• 数组定义方式1
  let arr: number[] = [ ];
  number[] 是约束数组中存储的数据必须是数字类型！

• 数组定义方式2
  let arr: Array = [ ];
  利用了泛型的知识点，后边详细讲解泛型

（3）联合类型

如果数组中存在的数据类型不只一种怎么办，这就是需要用到咱们的联合类型了：
联合类型其实就是通过 | 运算符，将多个类型隔开，以达到都能兼容的目的
let arr: (number | string)[] = [ ];
当然，如果还有更多类型，你就通过 | 去连接

联合类型除了可以在定义数组时使用，在定义普通变量时也可以使用：
let params: number | null = null;
比如经常使用变量接收一个计时器，其实计时器返回的结果是一个数字，是计时器的id。但是在定义变量的时候经常定义成null，所以这时候就可以通过联合类型解决这个问题：

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

（3）类型别名

想要知道什么是类型别名，来看下面这种情况，比如有一个数组，里边可以存放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[] = [ ];

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

（4）函数

函数创建好之后需要参数以及有返回值，在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