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关键字来断言,或者使用来断言(在JSX语法下这种方式会产生混淆,以为<>)
  • 类型断言不是类型转换,类型断言是编译过程中的,类型转换是运行时
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/开头。

你可能感兴趣的:(typescript,类型系统,JavaScript,TypeScript)