vue 引入flow 静态类型检测器

1、背景

首先介绍一下什么是flow , 一个 JAVASCRIPT 静态类型检测器 为何js 要进行类型检测？ 对于javasscrip 来讲，JavaScript 是一种弱类型（或称动态类型）语言，即变量的类型是不肯定的。

x = 5; // 5
x = x + 'A'; // '5A'
复制代码

优势-灵活，代码简洁 缺点-不利于发现类型错误，存在数据隐患，常常会遭到接触事后端语言同窗的吐槽

2、目前转化成强类型的方法

1. TypeScript 是微软2012年推出的一种编程语言，属于 JavaScript 的超集，能够编译为 JavaScript 执行 为何没有采用TypeScript 的方式，主要有如下几方面考虑

• 虽然语法与javascript有不少类似的地方，可是总归是一门新的语言类型，相对来讲有必定的学习成本
• 项目比较成熟，javascript 迁移TypeScript 相对工做量以及改动比较大
• 虽然vue2.0 已经支持了TypeScript的方式，可是不能保证咱们应用的全部的组件库都对此语法支持，为避免后期又不肯定的麻烦

2. Flow 是 Facebook 在2014年发布的一个类型检查工具

• 安装简单
• 相对没有学习成本
• 对已经成熟的项目改动较小
• 支持eslint 检测
• vue 源码采用的Flow 类型检测的方式

3、flow 的引入

1. 安装包

yarn add flow-bin @babel/preset-flow -D

2. 生成flow 文件

flow init 会生成一个.flowconfig 文件,修改文件配置

[ignore]
 .*/node_modules/.*
 .*/test/.*
 .*/build/.*
 .*/config/.*
 [include]
 
 [libs]
 
 [options]
 module.file_ext=.vue
 module.file_ext=.js
复制代码

3. 执行flow

在文件头部写入/* @flow */ 或者 // @flow 弱模式： /* @flow weak */ ,在弱模式下，Flow 就不作那么多类型检测， 对方法内的类型仍是会探测，可是对其余未注解的变量，会认为他们能够是 any 任何类型——也就意味着无须检测,适合项目初期 而后运行 flow check 或者 yarn run flow 咱们会看到文件报错信息，代表项目已经安装flow 成功

可是每次都手动执行命令检查很麻烦，因此下面咱们配置自动检查

4. 修改babel

修改.babel/babel.config.js 文件,添加@babel/preset-flow，这样babel 在编译的时候会移除 Flow 注解,把添加类型检测的文件转化成浏览器可支持的语法

presets: [
   '@babel/preset-flow'
   ]

复制代码

5. 添加eslint 代码检测 eslint-plugin-flowtype

yarn add eslint-plugin-flowtype -D 修改.eslintrc.js 文件

extends: [
    'plugin:flowtype/recommended',
  ],
rules: [
  'flowtype/require-parameter-type': 2,
  'flowtype/generic-spacing': 2
},
....
  plugins: ['flowtype'],
  settings: {
    flowtype: {
      onlyFilesWithFlowAnnotation: true //只在添加@flow注释的文件才作检查
    }
  }
复制代码

4、flow 使用方式简介

1. 类型注释 / 类型注解

在大多数状况下，Flow 都可以探测出具体类型，因此你不须要给每一个方法、变量都添加类型注解。 虽然说 Flow 能探测出类型，可是你依然能够严格声明类型。 只有下面这类状况才 必须 明确地声明类型：变量/方法/类 是从别的模块中导入的（在别的文件定义）

// @flow

(function() { 
function foo(x: string, y: number): string {
  return x.length * y;
}

foo('Hello', 42);
}); 
复制代码

这表示 foo 方法返回值的类型为 string，而且两个参数类型分别为 string 和 number

2. 原生数据类型

boolean、number、string、null、void 此处须要注意 上面的类型属性 与 Number, String, Boolean是有本质的区别的，咱们经过代码来看一下 代码类型为小写，表示常规类型

// @flow
function method(x: number, y: string, z: boolean) {
  // ...
}

method(3.14, "hello", true);
复制代码

代码类型为大写，表示对象类型

// @flow
function method(x: Number, y: String, z: Boolean) {
  // ...
}

method(new Number(42), new String("world"), new Boolean(false));
复制代码

3. 未肯定类型（Maybe types）

咱们可使用type 用 ?type, 表示此类型可能为type 类型，也有多是 null or void.

// @flow
function acceptsMaybeString(value: ?string) {
  // ...
}

acceptsMaybeString("bar");     // Works!
acceptsMaybeString(undefined); // Works!
acceptsMaybeString(null);      // Works!
acceptsMaybeString();   
复制代码

若是是对象类型的，咱们可使用 { propertyName?: string }

4. 泛型

泛型对象可使用别名类型来定义

type GenericObject<T> = { foo: T };
var numberObject: GenericObject<number> = { foo: 0 };
var stringObject: GenericObject<string> = { foo: "foo" };
复制代码

这里只介绍常规的使用方法以及 API ,详细内容还须要你们看文档

5、报错处理

1. types' can only be used in a .ts file

若是使用的vscode 咱们在只从过程当中可能会遇到 此问题， 解决办法： 关闭vs code 的检测
"javascript.validate.enable": false

6、参考文章

• 强类型 JavaScript 的解决方案
• 官方文档