JAVASCRIPT 通过FLOW实现类型检查,解决JS语言开发大型应用的所面临的缺陷

Flow的认识

Flow FACEBOOK团队推出的JS类型检查器。是为了解决JS语言的是弱类型以及动态类型的缺陷.
目前很多框架如VUE也有用到FLOW进行类型检查。了解FLOW对我们日后看VUE源码有一定的帮助.

flow实现类型检查的基本原理是启动一个服务,将代码按照flow类型检查规则进行编译,找到不符合预期的代码进行提醒.

flow的基本使用

1. 通过npm i flow-bin -D 安装
   

2. 在代码前面添加注释@flow，应该是为了让检查工具知道从哪里开始检查
   

3. 运行npx flow 启动flow服务，让其帮忙检查代码。
   
   ##. flow移除类型注解
   当我代码写完之后，类型注解是我们不需要的，可以通过编译移除注解。

1. 通过flow官方提供的flow-remove-types 包

详细步骤请看下图
step1. 安装 flow-remove-types
step2. npx flow-remove-types 第一个参数 -d 第二个参数

• 第一个参数需要进行移除注解的文件所在的目录
• 第二个参数是输出目录

2. 使用Babel配合些插件也可以实现

step1. npm install @babel/core @babel/cli @babel/preset-flow -D
step2. 配置babelrc的配置文件

3. flow开发插件

终端上显示flow类型错误毕竟不太直观，可以使用VS CODE 官方提供的 FLOW-LANGUAGE-SUPPORT 插件 直接在代码处标红提醒。

4. flow 会智能的进行类型推断

此处并没有添加类型注解，flow也会智能的提示。

5. flow类型注解的使用语法

以下是flow基本的类型注解,详情的可以参考官网.

// 1. 原始数据类型
const num:number = ini // NaN infinity 
const a: void = undefined
const b: null = null
const c: string = '23'
const d: boolean = true
const e: symbol = Symbol()
// 2. 定义数组类型注解
// 定义数组类型的时候需要指定数组中元素的类型
const arr: Array<number> = [1, 2, 3, 4]
const arr: number[] = [34, 3423, 44]
// [string, number] 表示当前数组只能有两位，第一个是字符串，第二个是数字。
const arr: [string, number] = ['hh', 3434]

// 3. 定义对象类型注解
// 表示该定义的该对象必须要有name和age这两个成员，
// 并且name键的值必须是string，age的值必须是number
const obj: {
      name?: string, age: number } = {
     
  name: 'reborn',
  age: 18,
  cc: 13
}
// 表示定义的该对象的key必须是string类型,值必须是string
const obj1: {
      [string]: string } = {
     
  // [Symbol()] : '332' // 会报错
  name: 'reborn'
}
// 表示该对象的name值是可选的
const obj2: {
      name?: string, age: number } = {
     
  name: 'reborn',
  age: 18,
  cc: 13
}

// 4. 对于函数类型的限制
// 1. 此处定义返回的是number类型
function foo1(): number {
     
  return 100
}
// 2. 没有返回值应该标注为void
function foo2(): void {
     
  log(100)
}

// 3. 函数参数直接在形参后面接上 ：
function foo3(name: string): void {
     
  log(100)
}

// 4. 函数作为参数
function foo4(callback: (string, number) => void) {
     
   callback('3423', 100)
}

foo4((str, num) => {
     
  log(str, num)
}) 


// 5. 特殊类型
// 当前变量只能够是 success error warning 三者之一
const type: 'success' | 'error' | 'warning' = 'success'
// 表示当前age变量只能够是string 或是number类型
const age: string | number = '3'
// 表示number变量可以为字符串，也可以是null 或是undefined；相当于 string | undefined | null
const number: ?string = 'reborn'
// 表示当前变量weight使用的类型注解是type关键字所定义的StringOrNumber的类型注解
type StringOrNumber = number | string
const weight: StringOrNumber  = '180'


// 6. 特殊类型
// mixed any 表示都可以接受任何数据类型
// mixed any的区别是 mixed还是属于强类型
function fn1(val: mixed) {
     
  // 类型未明确前是不能够调用方法的
  // val.toString() // 会提醒类型检查
  // 可以使用 类型判断
  if (typeof val === 'string') {
     
    val.toString()
  } else if(typeof val === 'number') {
     
    val * val
  }
}
// any属于弱类型
function fn2(val: any) {
     

}

6. flow会对js运行环境所提供的API进行校验