这是我参与「第五届青训营 」伴学笔记创作活动的第二天
课程内容
Typescript 学习背景介绍
TypeScript 是 JavaScript 的语法超集，它添加了静态类型，近几年的发展中，也受到诸多开发者的喜爱。Typescript 的社区逐渐壮大，日趋完善，为越来越多前端开发者提供服务
为什么是Typescript
JS
- 动态类型
- 弱类型语言
TS
- 静态类型
·可读性增强:基于语法解析TSDoc，ide增强
·可维护性增强: 在编译阶段暴露大部分错误
·多人合作的大型项目中，获得更好的稳定性和开发效率 - 弱类型语言
- JS 的超集
·包含于兼容所有Js特性，支持共存
·支持渐进式引入与升级
Typescript 基础语法讲解
1. Typescript 类型
1.1 基础数据类型
左边为JS代码，右边为TP代码
1.2 对象类型
> any是TS中特有的类型
1.3 函数类型
1.4 函数重载
1.5 数组类型
数组就是一种特殊的对象
2. 泛型
泛型：不预先指定确定的类型的时候使用，在使用时候根据传入的内容再确定和使用的一个类型
泛型的几种表示：
常用语法：
泛型约束：在泛型的声明之后使用extends类型表示的是一个类型的约束
泛型默认类型：在泛型的声明后通过等号的方式指定默认的类型
3. 类型别名 & 类型断言
类型别名：使用其他的名字或者变量来承载一个更复杂的类型
类型断言：对变量之后通过as实现类型断言
4.字符串/数字 字面量
Typescript 高级类型讲解
通过各种基础数据类型快速做高级类型的定义，然后自动衍生出非常多的类型。 从一个日常编码的case入手学习
1. 联合类型 & 交叉类型
若存在一个书本列表，有两种类型的书籍，不同的书籍是通过Type进行区分，比如说历史书有一个时间范围，小说有一个主题：
存在的问题：
- type指定是string，但是不适合于这个场景中，因为该场景只有两种type，如果这样编码会存在一定的隐患；
- 两种类型的书籍的作者都是string进行表示，存在交叠可以对代码进行简化
- 联合类型: IA | IB: 联合类型表示一个值可以是几种类型之一
- 交叉类型: IA & IB: 多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性
2. 类型守卫 & 类型保护
该段代码在JS中是可以成功运行的，但是在TS中因为类型保护机制会出现报错，所以还需要进行改进
这样定义一个函数并且还需要返回一个类型谓词可能会比较麻烦，但其实TS是非常智能的，所以还可以进行优化
3 子集类型
假设参数的入参一定是正确的： 这就会有一定的局限性
Record<string, any>是一个高级表达第一个泛型表示了key的类型，第二个泛型表示value的类型 所有的高级类型都可以从基础的数据类型得到表达和衍生
4 函数返回值类型
- 函数的返回值通过泛型进行表达。
- 定义了一个IDelayCall的类型别名，该类型是一个function类型，该类型必须是一个泛型，所以需要对泛型及逆行类型限定为函数
- 此处的extends表示的不再是泛型限制，而是类型推断
Typescript 工程应用介绍
浏览器Web
- 配置webapack loader相关配置
- 配置tsconfg.js文件
- 运行webpack启动 /打包
- loader处理ts文件时，会进行编译与类型检查
NodeJs
使用TSC进行编译
- 安装Node与npm
- 配置tsconfig.js文件
- 使用npm安装tsc
- 使用tsc运行编译得到js文件
