概述
发展历史
- 2012-10:微软TypeScript第一个版本(0.8)
- 2014-10:Angular 布基于TypeScript的2.0版本
- 2015-04:Visual Studio Code
- 2016-05:@types/react ,TypeScript 开发 React
- 2020-09:Vue3.0版本,持 TypeScript
- 2021-11:v4.5版
静态类型
JS:动态类型(编译发生在执行时,检查类型较后)
TS:静态类型(编译发生在执行前,提前检查类型)
- 可读性增强:基于语法解析TSDoc,ide增强
- 可维护性增强:在编译阶段暴露大部分错误 =>多人合作的大型项目中,获得更好的稳定性和开发效率
JS的超集
- 包含于兼容所有JS特性,支持共存
- 支持渐进式引入与升级,可以更加方便代码的编写
基本语法
基础数据类型
对象类型
函数类型
函数重载
这个是比较重要的,可以根据不同的入参指定不同的返回类型
数组类型
通过IArr4可以看出数组实际上是一个特殊的对象
补充类型
泛型
类型别名 & 类型断言
字符串/数字字面量
高级类型
联合/交叉类型
联合类型:IA|IB;联合类型表示一个值可以是几种类型之一
交叉类型:IA&IB;多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性
案例:书记列表的类型
类型保护与类型守卫
类型保护可能会导致联合类型中非公共属性无法直接访问
可以提供类型守卫,来对传入参数的类型进行判断
在真实的场景中,我们可以用typeof
、instanceof
来实现类型保护,当案例像上面的两个类型没有重合点时,才使用类型守卫
案例:编写merge函数
这个类型的实现就比较繁琐; 若target增加/减少key,则需要source联动去除; 若obj类型较为复杂,则声明source和target便需要大量重复2遍容易出错:
这里可以通过泛型来实现
函数返回值类型
工程应用
web
- 配置webapack loader相关配置
- 配置tsconfig.js文件
- 运行webpack启动/打包
- loader处理ts文件时,会进行编译与类型检查
awesome-typescript-loader babel-loader
node
- 安装Node与npm,注意检查是否安装成功
- 配置tsconfig.js文件
- 使用npm安装tsc
- 使用tsc运行编译得到js文件,只有js文件才能被实际运行。