JavaScript相关的类型注解系统
TypeScrip
类型系统
强类型与弱类型（类型安全方面）
非权威机构的定义
强类型
- 函数的实参与形参的类型必须相同
- 类型约束
- 不允许隐式类型转换
弱类型
- 函数的实参与形参的类型在语法上不必相同
- 类型上约束少
- 允许任意的数据隐式类型转换
- JavaScript的TypeError是在运行时通过逻辑判断抛出的，而不是编译时就会抛出。
静态类型与动态类型（类型检查方面）
静态类型
- 变量在声明时类型就是明确的，且声明后变量的类型不允许再修改
- 通俗地说，静态表示的是看一眼就知道是什么
动态类型
- 变量在运行时类型才能明确，且可以随意更改变量的类型
- 变量没有类型，变量存放的值才有类型
- 通俗地说，动态表示只有运行的时候才知道是什么
JavaScript自身类型系统的问题
JavaScript类型系统特征
- 弱类型 + 动态类型
- 缺少类型系统的可靠性
弱类型的问题
- 类型异常的情况只有运行代码的时候才知道，导致不能及时发现问题
- 没有类型约束导致功能出现问题，如函数返回值对于不同的参数类型是不同的。
- 类型的隐式转换出现一些意料之外的问题
强类型的优势
- 错误更早发现
- 代码具备智能提示，编码更准确
- 重构更可靠
- 减少代码中不必要的类型判断
Flow静态类型检查方案
静态类型检查工具
- 类型注解的方式标注变量的类型
let a: number = 6; // : number即为类型注解 - 可以通过Babel或Facebook官方的模块在生产环境中去除类型注解
- 不要求所有的变量都进行类型注解，可以按需注解
Flow的原理
对代码进行了编译，使得在开发阶段就可以使用一些扩展语法。
Flow的使用
- flow是一个node包，需要在使用前安装
npm install flow-bin -D。这里使用了开发依赖来安装flow-bin包，为的是让flow跟随项目，让项目的其他开发人员了解需要使用flow来进行静态类型检查。也可以使用全局安装的形式，使用命令行来启动flow的检查。 - 使用
npx flow init命令生成.flowconfig配置文件 - 在需要检查的JS文件开头添加
// @flow标记或者更为复杂注解方式。
// index.js文件
// @flow
/**
* 这是另一种在开头添加标记的方式
* @flow
**/
function sum(a: number, b: number) {
return a + b;
}
sum(100, 200);
// 在执行flow的时候，下面的调用会报错
sum('100', '200');
- 执行
npx flow来读取配置文件，执行flow服务。第一次执行的时候有点慢，是因为启动了一个后台服务，之后再执行flow时，就会很快的。
编译移除类型注解
flow-remove-types包
官方的移除注解方案
- 安装
npm install flow-remove-types -D - 运行
npx flow-remove-types 目标文件路径 -d 生成文件路径
Babel + @babel/preset-flow插件
- 安装
npm install @babel/core @babel/cli @babel/preset-flow -D - 添加Babel配置文件.babelrc
// .babelrc文件
{
"presets": ["@babel/preset-flow"]
}
- 使用
babel 目标文件路径 -d 生成文件路径启动编译
以上的Flow静态检查都会把检查结果输入到控制台，不太方便。
Flow Language Support插件（VSCode）
安装vscode的Flow Language Support插件，可以在vscode开发过程中进行静态类型检查，将代码中的类型问题以红色波浪线显示出来。
Flow官网给出的所有编辑器下支持的插件，点击查看
Flow的类型推断
Flow也可以根据值的类型推断出存储该值的变量的类型，从而显示出类型问题。但尽量还是添加类型注解，增加代码可读性。
Flow中的类型注解方法
原始类型值
- string：
const a: string = 'foo'; - number：
const b: number = NaN; // NaN属性number类型 - boolean：
const c: boolean = false; - null：
const d: null = null; - undefined：
const e: void = undefined; // 要标注值为undefined类型时，需要用void - symbol：
const f: symbol = Symbol('symbol type');
数组类型
const arr1: Array= [1, 2, 3]; // 表示数组元素全部都是number类型 const arr2: number[] = [1, 2, 3];const foo: [string, number] = ['foo', 6]; // 表示固定长度的数组，并指定元素类型，这里实际上表示了元组这种类型
对象类型
const obj1: { foo: string, bar: number } = { foo: 'foo', bar: 6 } //对属性值进行类型注解const obj21: { foo?: string, bar: number } = { bar: 6 } // 可以在属性名后添加?表示该属性属于可选属性const obj3: { [string]: string } = {}; obj3.key1 = 'value1'; obj3.key2 = 68; // 动态添加属性的情况下，可以先指定属性的类型
函数类型：对参数与返回值进行类型约束
- 函数参数与返回值的类型注解
function square(n: number): number {
return n * n;
}
// 没有返回值则标记为void
function foo(): void {
console.log('void function');
}
- 对函数作为值的情况下进行类型约束，使用箭头函数的方式来注解：
(参数类型注解) => 返回值类型注解
function foo(callback: (string, number) => void) {
callback('string', 66);
}
特殊类型
字面量类型
类型注解为某个字面量值const a: 'foo' = 'foo'; // 要求变量a只能存放值'foo'; 一般这样做意义不大，主要是配合联合类型来使用
联合类型
- 联合类型用来约束变量只能存放约束范围内的值
const type: 'success' | 'waring' | 'danger' = 'success'; // type变量只能存放'success'、'warning'、'danger'这三个值中的某一个 - 联合类型也可以约束变量只能存放约束范围内的类型
const b: string | number = 'foo'; // 变量b只能存放string类型或者number类型
MayBe类型
当变量可以是约束的类型，也可以是null或undefined时，使用?作为类型前缀来注解。
// ?number表示除了number类型外，可以是undefined或null
const gender: ?number = undefined;
mixed类型
所有类型的联合类型const a: mixed = 'foo';。
mixed类型的意义在于变量不能在使用过程中随意更改自己的类型。一旦确定了是哪种类型，之后就必须是该类型。换句话说，mixed依然是强类型。
any类型
任意类型const b: any = 'foo';
any类型允许变量在使用过程中随意更改自己的类型，即弱类型。
类型别名（类型声明）
使用type关键字来声明一个类型（自定义一个类型，或者称为类型别名），然后可以使用该类型别名来做注解。
// type声明一个StringOrNumber的类型别名，然后可以使用该类型别名来做注解
type StringOrNumber = string | number;
const c: StringOrNumber = 66;
Flow相关参考资料
官方类型手册
第三方类型手册，该手册更加直观清晰。
Flow运行环境API
如浏览器环境或Node环境下提供的API，这些API所对应的类型声明文件。
这些API对应的类型声明文件点击这里。
TypeScript语言规范与基本应用
TypeScript是JavaScript的超集
超集 = JavaScript + 类型系统 + ES6+
TypeScript 通过编译生成 JavaScript
缺点
- 新的概念
- 项目初期带来一些成本
基本使用
- 安装：
npm install typescript -D作为开发依赖安装，当然也可以全局安装。局部安装之后，就会出现/node_modules/bin/tsc文件，tsc作为TypeScript编译文件的命令。 - 编译：使用
npx tsc 源文件路径 -o 生成文件路径来将源文件编译为JavaScript，将ES6+语法生成ES5甚至ES3的语法。 - 配置：使用配置文件来为编译做配置
配置文件：为编译项目做统一配置
- 生成配置文件：使用
npx tsc --init在项目根目录下生成tsconfig.json配置文件 - 配置文件中的配置字段：“compilerOptions”
- “target”：表示生成文件的ES语法
- “module”：表示生成文件的模块语法，默认为CommonJS规范
- “lib”：表示编译时使用的类型声明标准库。如果不开启时，默认与target字段相对应。即target如果是es5，则类型声明库使用es5的声明库，这样一来源代码中的ES6新增的API就会报错。当lib设置为[“es2015”]时，需要同时添加"DOM"声明库，即[“es2015”, “DOM”]，因为开启了lib之后，屏蔽了默认使用的声明库，需要将浏览器环境下的API声明库再添加回来。
- 标准库：内置对象所对应的声明文件
- “outDir”：生成文件的路径
- “rootDir”：源文件的路径
- “sourceMap”：是否生成sourceMap
- strict：是否使用严格模式类型检查。严格模式要求为每个变量明确指定类型，不允许类型推断。
- strictNullChecks：是否使用严格模式检查null值
- 只有在用tsc命令编译项目时才会读取配置文件，如果只是编译某个文件，则配置文件中的信息不会被读取使用。
- 编译的时候回根据类型声明文件（包括标准库和自定义的类型声明文件）进行编译。
显示中文错误消息
- 使用
npx tsc --locale zh-CN命令让TypeScript在控制台显示中文错误消息。 - 在vscode的settings中，找到TypeScript: Locale选项，设置为zh-CN，这样在vscode中显示的错误消息就会是中文的。
作用域问题
如果文件之间不是模块作用域或者函数作用域时，声明的变量会被编译到全局作用域，有可能会出现重复声明的报错问题。
TypeScript中的类型系统
TypeScript中注解原始类型值
基本与Flow一致。
不同点：
- string、number和boolean在非严格模式下可以为null
- symbol类型：注解为symbol时，当target不为es2015时，值如果是Symbol类型会有报错。
- void类型：值可以是undefined或null（严格模式下不能为null）
TypeScript中的引用类型约束
object类型
泛指所有的非原始类型，或者说object类型指的是所有引用类型。
const foo: object = {}; // 值可以是对象、数组、函数等等
如果单纯指对象类型，则使用对象字面量来做类型注解或者接口interface。对象类型要求值与类型注解的shape完全一致。
const obj: { foo: number } = { foo: 66 }; // 这里的值必须是属性为foo且值为number类型的对象
数组类型
ArrayArray泛型，如Array[] number[]
元组类型
- 元素数量和各个元素类型都明确的数组。
- 使用字面量形式注解，如
const tuple: [number, string] = [ 66, 'hello']; - 适合在一个函数中返回多个类型的值。如Map中的键值对
- React中的Hook就使用了二元形式的元组类型
枚举类型
- 给一组值进行额外的信息标注（让值有意义的描述）
- 枚举并不只是类型，TypeScript中的枚举是有值的。
- 有限的一组值。
- 枚举类型会在编译时入侵源代码，也就是说，枚举类型会被加入到编译后的生成代码中，通过生成一个双向键值对的方式（双向键值对指的是通过键找到值，通过值找到键）
使用enum关键字声明一个枚举类型的变量并初始化。
// 声明枚举类型PostStatus
enum PostStatus {
// 注意这里使用=而不是:来赋值
Draft = 0,
Unpublished = 1,
Published = 2
}
// 默认情况下，值是从0开始的自增长，所以以上的声明可以不写值
enum PostStatus {
Draft, Unpublished, Published
}
// 枚举的值也可以是字符串，但这时候就需要明确的初始化了。
enum PostStatus {
Draft = 'draft', Unpublished = 'unpublished', Published = 'published'
}
const post = {
// 使用.符号来使用枚举类型的值
status: PostStatus.Draft
}
如果不需要通过索引来找到值或者键，则建议使用常量枚举类型，在enum之前加入const。这样枚举类型代码则不会入侵到源代码中，生成的代码只会使用枚举的值。
const enum PostStatus {
Draft, Unpublished, Published
}
函数类型
函数声明约束
// b为可选参数
function func1(a: number, b?: number, ...rest: number[]): string {
return 'func1';
}
函数表达式约束
const func2: (a: number, b?number) => string = function(a: number, b?: number): string {
return 'func2';
}
任意类型
使用any来注解类型，同样也是弱类型。
联合类型
- 多种类型中的任意一个，使用 | 符号来连接多种类型
type Uni = string | number; // 定义类型别名Uni，string和number构成的联合类型
交叉类型
- 多种类型的合并为一个类型，包含了所有类型的成员
type Uni = string & number; // 定义类型别名Uni, string和number构成的联合类型
隐式类型推断
根据代码中变量的使用情况来对变量的类型做推断。经过类型推断的变量如果再重新赋予其他类型的值，就会报错。
建议为变量明确类型，而不是使用隐式推断。
类型断言
- 明确告诉TypeScript编译器某个变量的类型一定是某个类型，从而使得TypeScript不会因为类型不唯一而出现不正确的报错。
- 使用as关键字来断言，或者使用
- 类型断言不是类型转换，类型断言是编译过程中的，类型转换是运行时
const nums = [100, 101, 102];
const res = nums.find(i => i > 1); // 如果不使用断言，这里TypeScript会推断res类型为number | undefined，因为TypeScript并不会执行代码。实际上，这里的res一定是number。
const square = res * res; // 如果不进行类型断言，这里的res会报错，因为undefined类型不可以这样运算
const num1 = res as number; // as + 类型，断言
const num2 = <number>res; // 断言
接口Interface
- 可以理解为一种规范，约束对象的结构（成员及成员类型）
- 使用interface关键字来声明
- 可选成员，在成员后添加?
- 只读成员，在成员之前添加readonly
- 动态成员，如缓存对象在运行时会动态添加成员
- 同名接口会自动合并（类则不可以）
interface Post {
title: string;
content: string;
subtitle?: string; // 可选成员
readonly summary: string;
}
// 缓存对象中动态成员
interface cache {
// 使用[]来表示未命名的成员以及成员名的类型
[prop: string]: string
}
function printPost(post: Post) {
console.log(post.title, post.content);
}
类
描述一类具体对象的抽象成员
TypeScript增强了class的相关语法
基本使用
- 类内的属性成员需要先定义，不能动态添加；
class Person {
// 需要先对成员进行类型注解
name: string, // 可以在类成员定义时初始化，也可以在构造函数中初始化
age: number
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
sayHi(msg: string): void {
console.log(`I am ${this.name}, ${msg}`);
}
}
访问修饰符
- private：私有属性，只有类内部可以访问
- protected：只有类和子类才可以访问
- public：公共属性，类外部也可以访问
class Person {
// 访问修饰符对成员的访问控制
public name: string, // 可以在类成员定义时初始化，也可以在构造函数中初始化
private age: number,
protected gender: boolean
constructor(name: string, age: number) {
this.name = name;
this.age = age;
this.gender = true;
}
sayHi(msg: string): void {
console.log(`I am ${this.name}, ${msg}`);
}
}
如果构造函数使用private修饰之后，则外部无法调用构造函数来创建实例。除非类暴露出静态方法来供外部调用。
只读属性
使用readonly关键字，跟在访问修饰符的后面，在成员名之前。
类与接口
接口是一种抽象的规范，类可以是抽象的规范，也可以是具体的实现。类可以使用implements关键字来表示对接口的实现。
// 定义一个接口，规范了该接口必须要有的成员，但成员是抽象的，不必具体实现
interface EatAndRun {
eat(food: string): void;
run(distance: number): void;
}
// 定义了一个Person类，该类具体实现了接口EatAndRun的规范
class Person implements EatAndRun {
eat(food: string): void {
console.log(`优雅地进餐: ${food}`);
}
run(distance: number): void {
console.log(`直立行走: ${distance}`);
}
}
// 定义了一个Animal类，该类也具体实现了接口EatAndRun的规范
class Animal implements EatAndRun {
eat(food: string): void {
console.log(`呼噜呼噜地吃: ${food}`);
}
run(distance: number): void {
console.log(`爬行: ${distance}`);
}
}
更合理的是，一个接口应该只规范一个成员
// 定义Eat接口
interface Eat {
eat(food: string): void;
}
// 定义Run接口
interface Run {
run(distance: number): void;
}
// 定义了一个Person类，该类具体实现了接口Eat、Run的规范
class Person implements Eat, Run {
eat(food: string): void {
console.log(`优雅地进餐: ${food}`);
}
run(distance: number): void {
console.log(`直立行走: ${distance}`);
}
}
// 定义了一个Animal类，该类也具体实现了接口Eat、Run的规范
class Animal implements Eat, Run {
eat(food: string): void {
console.log(`呼噜呼噜地吃: ${food}`);
}
run(distance: number): void {
console.log(`爬行: ${distance}`);
}
}
抽象类
- 与接口相似，但可以有具体的实现。
- 使用abstract关键字定义抽象类，抽象类只能继承，不能用来构造实例。
- 抽象类中也可以使用abstract关键字定义抽象方法，子类需要去具体实现抽象方法。
泛型
- 指的是声明时没有指定具体类型，只有在使用的时候才去具体指定类型。
- 使用<>来指定具体类型，即类型断言
// 创建一个长度为length、元素为value的数组
function createNumberArray(length: number, value: number): number[] {
// const arr = Array(length).fill(value); 这种方式下使用Array(length)得到的数组元素是any类型，在Array标准库声明文件中，使用的是Array泛型，指的是在使用Array()方法时，再指定中T的类型。
const arr = Array<number>(length).fill(value);
return arr;
}
可以在声明时使用泛型参数，等到调用时再指定泛型参数的类型。这样可以更大程度复用代码。
// 创建一个长度为length、元素为value的数组，这里数组的元素是任意类型的，只有调用时传入具体类型。
function createArray<T>(length: number, value: <T>): <T>[] {
// const arr = Array(length).fill(value); 这种方式下使用Array(length)得到的数组元素是any类型，在Array标准库声明文件中，使用的是Array泛型，指的是在使用Array()方法时，再指定中T的类型。
const arr = Array<T>(length).fill(value);
return arr;
}
// 调用时指定泛型参数为string
const arr = createArray<string>(3, 'hello');
类型声明及类型声明文件
- 使用declare关键字来对用到的函数、类等进行类型声明。一般是为了对没有类型声明的第三方模块进行补充声明。
- 很多第三方模块在TypeScript社区都已经有类型声明文件，只要安装就可以了，注意是开发依赖。
npm install @types/模块名 -D。一般类型声明文件是.d.ts后缀名文件，命名以@types/开头。