1 含义 & 优势

TypeScript是具有类型语法的JavaScript，是一门强类型的编程语言

优势

• 静态类型检查，提前发现代码错误
  
• 良好的代码提示，提升开发效率
  

TypeScript不是万能的，技术的选型不能脱离具体的业务和应用场景，TS更适合用来开发中大型的项目，或者是通用的JS代码，再或者是团队协作开发的场景

2. 编译环境

2.1 手动编译环境

2.2 搭建工程化下的自动编译环境

3. 类型注解

类型注解指的是给变量添加类型约束，使变量只能赋值为约定好的类型，同时可以有相关的类型提示。

3.1 支持的常用类型注解

JS已有类型

1. 简单类型：number、string、boolean、null、undefined
2. 复杂类型：数据、函数

---

TS新增类型：联合类型、类型别名、接口（interface）、字面量类型、泛型、枚举、void、any等

3.2 简单类型

• 简单类型的注解完全按照JS类型（全小写的格式）来书写即可

3.3 数组类型

• 数组类型注解：
  1. 不仅可以限制变量类型为数组而且可以限制数组成员的类型
  2. 编码时不仅可以提示数组的属性和方法而且可以提升成员的属性和方法

---

以下是数组类型注解的两种语法：

3.4 联合类型

概念：将多个类型合并为一个类型对变量进行注解
需求：如何注解数组类型可以让数组中即可以存放string类型的成员也可以存放number类型的成员

说明：string | number 表示arr3中的成员既可以是string类型也可以是number类型

3.5 类型别名 - type

概念：通过type关键词给写起来较复杂的类型起一个其他的名字，用来简化和复用类型

说明：type 类型别名 = 具体类型 其中类型别名的命名采用规范的大驼峰格式

3.5.1 注解对象 - type

3.5.2 type + 交叉类型 模拟继承

类型别名配合交叉类型（&）可以模拟继承，同样可以实现类型复用

3.6 函数类型

概念：函数类型是指给函数添加类型注解，本质上是给函数的参数和返回值添加类型约束

说明:

1. 函数参数注解类型之后不但限制了参数的类型还限制了参数为必填
2. 函数返回值注解类型之后限制了该函数内部返回return出去的值必须满足类型要求

---

好处：

1. 避免因为参数不对导致函数内部的逻辑错误
2. 对函数起到说明的作用

3.6.1 箭头函数

箭头函数方式:函数表达式的类型注解有两种方式：参数和返回值分开注解和函数整体注解

3.6.2 可选参数 - ?

概念：可选参数表示当前参数可传可不传，一旦传递实参必须保证参数类型正确

说明：LastName?:string参数表示可传参数，可传可不传，一旦传递实参必须保证类型为string类型

3.6.3 无返回值 - void

概念：JS中的有些函数只有功能没有返回值，此时使用void进行返回值注解，明确表示函数没有函数值

注意事项：在JS中如果没有返回值，默认返回的是undefined，在TS中void和undefined不是一回事，undefined在TS中是一种明确的简单类型，如果返回值为undefined，那么返回值必须是undefined

3.7 接口类型 - interface

作用：在TS中使用interface接口来描述对象数据的类型（常用于给对象的属性和方法添加类型约束）

说明：一旦注解接口类型之后对象的属性和方法类型都需要满足要求，属性不能多也不能少

3.7.1 可选设置

概念：通过 ？ 对属性进行可选标注，赋值的时候该属性可以缺失，如果有值必须保证类型满足要求

3.7.2 接口继承

接口的很多属性是可以进行类型复用的，使用extends实现接口继承，实现类型复用

3.8 字面量类型

概念：使用js字面量作为类型对变量进行类型注解，这种类型就是字面量类型，字面量类型比普通的类型更加精确（通常和联合类型互相使用）

说明：除了上面的数字字面量，js常用的字符串字面量、数组字面量、对象字面量等都可以当成类型使用

3.9 类型推论

概念：在TS中存在类型推断机制，在没有给变量添加类型注解的情况下，TS也会给变量提供类型，以下是发生类型推断的几个场景

3.10 any类型

作用：变量被注解为any类型之后，TS会忽略类型检查，错误的类型赋值也不会报错，也不会有任何提示

注意：any的使用越多，程序可能出现的漏洞越多，因此不推荐使用any类型，尽量避免使用

3.11 类型断言

• 作用：有些时候开发者比TS本身更清楚当前的类型是什么，可以使用断言（as）让类型更加精确和具体
• 需求：获取页面中的id为link的a元素，尝试通过点语法访问href属性

3.12 泛型

概念：泛型（Generics）是指在定义接口、函数等类型的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性，使用泛型可以复用类型并且让类型更加灵活

语法：在接口类型的名称后面使用<T>即可声明一个泛型参数，接口里的其他成员都能使用该参数的类型：interface ResData<T> {}

通用思路：

1. 找到可变的类型部分通过泛型<T>抽象为泛型参数（定义参数）
2. 在使用泛型的时候，把具体类型传入到泛型参数位置（传参）

3.12.1 泛型别名

语法：在类型别名type的后面使用<T>即可声明一个泛型参数，接口里的其他成员都能使用该参数的类型：type ResData<T> = {}

3.12.2 泛型函数

语法：在函数名称的后面使用<T>即可声明一个泛型参数，整个函数中（参数、返回值、函数体）的变量都可以使用该参数的类型：function fn<T>(){}

3.12.3 泛型约束

作用：泛型的特点就是灵活不确定，有些时候泛型函数的内部需要访问一些特定类型的数据才有的属性，此时会有类型错误，需要通过泛型约束解决