这是我参与「第五届青训营」伴学笔记创作活动的第 3 天

TypeScript发展历史

• 2012-10：微软发布了 TypeScript 第一个版本(0.8)
• 2014-10: Angular发布了基于TypeScript 的2.0版本
• 2015-04：微软发布了Visual Studio Code
• 2016-05：@types/react 发布，TypeScript可开发React
• 2020-09：Vue发布了3.0版本，官方支持TypeScript
• 2021-11：v4.5版本发布

什么是TypeScript

JS

需要等到代码真正去执行的时候才能发现错误(晚)

• 动态类型（执行期做类型检查）

• 弱类型语言

• JS已有类型

  • 原始类型：number/string/boolean/null/undefined/symbol
  • 对象类型：object（包括数组、对象、函数等对象）

TS

在代码编译的时候(代码执行前)就可以发现错误(早)，减少找Bug、改Bug时间

• 静态类型（编译期做类型检查）1、编译 2、执行

  • 可读性增强：基于语法解析TSDoc，ide增强
  • 可维护性增强：在编译阶段暴露大部分错误 => 多人合作的大型项目中，获得更好的稳定性和开发效率

• JS的超集：

  • 包含于兼容所有JS特性，支持共存
  • 支持渐进式引入与升级

• 弱类型语言

TS常用类型

• 联合类型、自定义类型（类型别名）、接口、元组、字面量类型、枚举、void、any等

函数重载

数组类型

Typescript泛型

类型别名 & 类型断言

字符串/数字 字面量

高级类型

CASE

联合/交叉类型

• 联合类型：IA | IB；联合类型表示一个值可以是几种类型之一
• 交叉类型：IA & IB；多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性

类型保护与类型守卫

• 类型守卫：定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域
• 联合类型 + 类型保护 = 自动类型推断

实现 merge 函数类型

• 索引类型：关键字【keyof】，其相当于取值对象中的所有key组成的字符串字面量
• 关键字【in】，其相当于取值 字符串字面量 中的一种可能，配合泛型P，即表示每个key
• 关键字【?】,通过设定对象可选选项，即可自动推导出子集类型

函数返回值类型

实现函数delayCall的类型声明

• 关键字【extends】跟随泛型出现时，表示类型推断，其表达可类比三元表达式：如 T === 判断类型 ？类型A : 类型B
• 关键字【infer】出现在类型推荐中，表示定义类型变量，可以用于指代类型

工程应用

Web

• webpack

  • 配置webpack loader相关配置
  • 配置tsconfig.js文件
  • 运行webpack启动/打包
  • loader处理ts文件时，会进行编译与类型检查

• loader

  • awesome-typescript-loader
  • babel-loader

Node

• 使用TSC编译

  • 安装 Node 与 npm
  • 配置 tsconfig.js文件
  • 使用 npm 安装tsc
  • 使用tsc运行编译得到js文件

总结与反思

其实今天的课程信息量有点大，还是有点不太消化，第一次接触TS还是得慢慢来，还是先看点入门的视频，一步一步来，不能太着急，这个笔记其实只有一半，中间有好多空白，剩下的就只能在自己之后慢慢的填写，今天就先到这吧~