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版本发布
为什么是TS
什么是ts:Typed JavaScript at Any Scale是 添加了类型系统的 JavaScript,适用于任何规模的项目。
TS是静态类型,弱类型语言,JS是动态类型,TS可读性强,可维护性强,多人大型项目的开发效率和稳定性高。
它是JS的超集,包含兼容所有js特性,支持共存,支持渐进式引入与升级
基本语法
基础数据类型
- 通过var x : type = data定义
- string、number、boolean、null、undefined
对象数据类型
- var obj : type = {xxx}
函数
- function add(x:number,y:number):number{xxx};
- function add(x:number,y:number)=>number{xxx};
- interface IMult{
(x:number,y:number):number;
}
const mult :Imult = (x,y)=>x*y; - 函数可以重载(同名不同参)
数组
- type IArr1 = number[];
- type IArr2 = Array<string|number>
- type IArr3 = [number,number]//元组
其他类型
- any任意
- void空
- enum枚举类型,支持正反映射
- 泛型
泛型
- 不预先指定具体类型,使用时再指定
- 数组Array< T >
- class iMan< T >{
instance T
} - < T extends string >限制泛型必须符合字符串
- < T = number >指定默认类型
别名和断言
- type xxx = Array<{
key:string,
[objkey:string]:any
}>
用xxx指代类型 - 通过as关键字断言结果是正确的类型以此通过编译
字面量
使用|指定固定取值
- var x = 1|2|3,只能取1,2,3
高级类型
联合/交叉类型
- 联合类型: IA|IB; 联合类型表示一个值可以是几种类型之一
- 交叉类型: IA&IB; 多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性
类型保护与类型守卫
- 类型守卫:定义一个函数,它的返回值是一个类型谓词,生效范围为子作用域
- 联合类型+类型保护=自动类型推断
- 索引类型:关键字【keyof】,相当于取值对象中的所有Key组成的字符串字面量
工程应用
Webpack
- 配置webpack loader相关配置
- 配置tsconfig.js相关文件
- 运行webpack启动,打包
- loader处理ts文件时,会自动进行编译与类型检查
使用TSC编译
- 安装node与npm
- 使用npm安装tsc
- 配置tsconfig.js文件
- 使用tsc运行编译得到js文件