TypeScript 入门 | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第3天
什么是 TypeScript
静态类型
- 可读性增强：基于语法解析TSDoc，ide增强
- 可维护性增强：在编译阶段暴露大部分错误
基于以上两点，我们在多人合作的大型项目中，可获得更好的稳定性和开发效率。
JS的超集
- 包含兼容所有JS特性，支持共存
- 支持渐进式引入与升级
基本语法
基本数据类型
如图所示，左为JS语法，右为TS语法，其主要区别为TS在声明变量时，需在变量名后添加: 变量类型。
对象类型
如图所示，定义一个对象类型IBytedancer并声明一个对象bytedance。
- 只读属性：在属性名前添加readonly关键字将属性设为只读属性
- 可选属性：在属性名后添加?将属性设为可选属性
- 任意属性：如果一个对象的key是一个变量，可使用[key: string]: any设置任意属性，any是一个TypeScript中特有的类型，意为任何类型都可以
示例如下
函数类型
JS中声明函数，如图所示。
TS中为函数声明类型有以下 3 种方式，如图所示。
- 直接在函数上进行类型补充
- 给函数变量赋值函数类型声明
- 使用interface关键字为函数声明类型，此方式相较于以上两种，更为清晰
函数重载
对getData函数进行重载，timestamp为可缺省参数。
使用interface简化代码，示例如下。
数组类型
如图所示，TS中为数组声明类型有以下 4 种方式，前两种方式较为常用。
TypeScript 补充类型
TypeScript 泛型
类型别名 & 类型断言
字符串/数字 字面量
高级类型
联合/交叉类型
如图所示，联合/交叉类型解决了类型声明繁琐，存在较多重复的问题。
- 联合类型：IA | IB; 联合类型表示一个值可以是几种类型之一
- 交叉类型：IA & IB; 多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性
类型保护与类型守卫
如图所示，访问联合类型时，出于程序安全，仅能访问联合类型中的交集部分。
类型守卫：定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域。
示例如下
索引类型
函数返回值类型
工程应用
浏览器 Web
webpack
- 配置webpack loader相关配置
- 配置tsconfig.js文件
- 运行webpack启动/打包
- loader处理ts文件时，会进行编译与类型检查
相关loader
NodeJS
使用TSC编译
- 安装Node与npm
- 配置tsconfig.js文件
- 使用npm安装tsc
- 使用tsc运行编译得到js文件
