javascript的类型检测工具-flow

安装步骤

1. 下载

   npm install flow-bin --dev
   

2. 在package.json的scripts中配置npm命令

   "flow": "./node_modulws/.bin/flow"
   

3. 初始化flow配置，在终端中运行

   npm run flow init
   

4. 运行flow

   npm run flow 
   

5. 需要在文件中注释@flow

6. 具体使用

   // @flow
   
   // 定义函数
   // 通过:number，注解类型为数字，括号后写的类型转换为定义函数返回值的类型，没有返回值也会报错，没有返回值标明void
   function getSums(a:number, b:number):number { 
   	return a + b;
   }
   
   // 定义参数为函数
   // 定义foo的参数为函数，并且有两个参数，第一个为字符串，第二个为数字，并且返回值为字符串
   function foo (callback: (string, number) => string) {
   	callback()
   }
   
   // 定义数组
   let arr: Array<number> = [1]; // 定义由数字组成的数组
   let arr number[] = [1]; // 与上方等价
   let arr: [string, number] = ["1", 1] // 定义数组长度为2，且第一个为字符串，第二个是数字
   
   // 定义对象
   let obj: {foo?: string, bar: number} = {bar: 1}// 定义对象bar为数字，foo为字符串，问号代表foo可不存在
   let obj: {[string]: number} = {} // 定义对象的key为字符串，value为数字
   
   // 字面量使用，使值必须为给定的
   let str: 'foo' = 'foo'; // str只能是值为foo的字符串
   let msg: 'success' | 'error' = 'success'; // msg的值只能是success或error的字符串 | 代表或
   
   // 自定义类型
   type numberOrString = string | number // 自定义numberOrString为数字或字符串的类型
   let num: numberOrString = '100'; // 不报错，定义num为数字或字符串类型
   
   // maybe 兼容空值null 或 undefined
   let num: ?number = 0
   
   // 任意值
   // mixed与any的区别，any是弱类型的，可使用数字，字符串等的方法，而不报错，而mixed不行，如果需使用，需要加typeof等的类型判断
   let num: any = 0; // any 指此变量可以为任何类型
   let num: mixed = 0; // mixed 此变量也可设置为任何类型
   

7. 打包去掉注解：
   因为代码中有额外的类型注解，而js的规范中，并没有此种写法，把代码直接在浏览器中运行会报错，而且类型检测只是开发中使用，在发布时，应该去掉类型注解，可以使用flow官方提供的flow-remove-types，或babel的@babel/preset-flow来实现

• 下载

  npm install flow-remove-types --dev
  

• 配置命令

  // 在package.json中的scripts中增加命令
  "flow-remove": "./node_modules/.bin/flow-remove-types . -d dist"
  

• 终端运行去掉注解

  // 终端运行命令，会把当前项目，去掉注解并放到dist文件夹下
  npm run flow-remove
  

8. 插件：vscode可通过安装folw Language Support，实现保存直接检验代码类型