为什么要学习TypeScript
TypeScript VS JavaScript
| TypeScript | JavaScript |
|---|---|
| JS的超集，用于解决大型项目的代码复杂性 | 一种脚本语言，用于创建动态网页 |
| 强类型，支持静态和动态类型 | 动态弱类型语言 |
| 可以在编译期间发现并纠正错误 | 只能在运行时发现错误 |
| 不允许改变变量的数据类型 | 变量可以被赋值成不同类型 |
TS带来了什么
- 类型安全
- 下一代JS特性
- 完善的工具链
TS推荐
- Awesome TS ： TS开源教程及应用
- ByteTech TS&React： 开发模式介绍
- TypeScript Playground ：TS到JS在线编译
TS 基础
基础类型
- boolean \ number \ string
- 枚举 enum
- any \ unknown \ void
- never
- 数组类型 []
- 元组类型 tuple
函数类型
- 定义： 要定义输入函数类型和输出类型
- 输入参数： 参数支持可选参数和默认参数
- 输出参数： 输出可以自动推断，没有返回值时，默认为void类型
- 函数重载： 名称相同但是参数不同，可以通过重载支持多种类型
interface
- 定义： 接口是为了定义对象类型
- 特点：
- 可选参数：？
- 只读属性：readonly
- 可以描述函数类型
- 可以描述自定义属性
- 总结： 接口非常灵活，duck typing
类
- 定义：写法和JS差不多，增加了一些定义
- 特点
- 增加了punlic \ private \ protected 修饰符
- 抽象类
- 只能被继承，不能被实例化
- 作为基类，抽象方法必须被子类实现
- interface 约束类，使用 implenments 关键字
TS 进阶
高级类型
- 联合类型
- 交叉类型
- 类型断言
- 类型别名
- 定义：给类型起个别名
- 相同点
- 都可以定义对象或者函数
- 都允许继承
- 差异点
- interface 是 TS 用来定义对象，type 是用来定义别名方便使用
- type 可以定义基本类型，interface 不行
- interface 可以合并重复声明，type 不行
泛型
-
定义 ：考虑可重用性，组件不仅能支持当前的数据类型，同时也能支持未来的数据类型
-
可以使用泛型来创建可重用的组件
基本使用
- 基本定义
- 泛型的语法是 <> 里面写参数类型，一般用 T 表示
- 使用时有两种方法指定类型
- 定义要使用的类型
- 通过 TS 类型推断， 自动传导类型
- 泛型的作用是临时占位，之后通过传来的类型进行推导
泛型工具类型
基础操作符
- typeof 获取类型
- keyof 获取所有键
- in 遍历枚举类型
- T[K] 索引访问
- extends 泛型约束
常用工具类型
- Partial 将类型属性变为可选
- Required 将类型属性变为必选
- Readonly 将类型属性变为只读
- Pick 、 Record ....
TS 实战
声明文件
-
declare 三方库需要类型声明文件
-
.d.ts 声明文件定义
-
@types 三方库TS类型包
-
tsconfig.json 定义 TS 的配置
