JS静态类型检查工具Flow使用指南

TypeScript最近大火，很多人在说它与JavaScript不同之处，其中有一点必提的就是类型检查。如果我不想用TS写代码，还想对原生的JavaScript做类型检查，有没有这样的工具包呢？

FLow：https://flow.org/en/

Flow是由 facebook 开发的 JavaScript 静态类型检查工具。下面举几个例子，看看怎么使用。

安装使用

1. npm init 生成 package.json
2. npm install --save-dev @babel/core @babel/cli @babel/preset-flow
3. 创建.babelrc，配置

{
  "presets": ["@babel/preset-flow"]
}

4. npm install --save-dev flow-bin
5. 在package.json中的脚本中添加

 "scripts": {
    "flow":"flow",
  }

6. npm run flow init 初始化flow，生成.flowconfig
7. 创建测试文件 test-flow.js，添加代码

function foo(x: ?number): number {
    if (x) {
        return x;
    }
    return 0;
}

foo('hi')

8. 运行 npm run flow

image.png

类型检查成功！

几个例子

1. 混合类型的检查

如果想要检查的类型可能是 string 也可能是 number 怎么办？Flow 也支持多种类型的检查。

function foo(value: string | number) {
  return '' + value;
}

foo(123) // Works!
foo('hi') // Works!
foo(true) // Error!

2. 可选类型

在代码中传递 null 和 undefined 的很常见的，如何在这种情况下检查类型呢。我们需要在类型前面加一个？，比如?number

// @flow
function foo(value: ?number) {
  // ...
}

foo(42);        // Works!
foo();          // Works!
foo(undefined); // Works!
foo(null);      // Works!
foo("42");      // Error!

如果你的参数是一个对象，没有属性key，应该怎么合理检查呢？

// @flow
function foo({ value }: { value?: ?number }) {
  // ...
}

foo({ value: undefined }); // Works!
foo({});                   // Works!

3. 类检查

// @flow

class Bar {
  x: string;          
  y: string | number; 
  z: boolean;

  constructor(x: string, y: string | number) {
    this.x = x
    this.y = y
    this.z = false
  }
}

var bar: Bar = new Bar('hello', 4)

4. 自定义类型检查

像 Vue 、React 这样的框架不止有基本类型，肯定有自己定义的类型，那 Flow 是怎么执行检查的呢？

为了解决这类问题，Flow 提出了一个 libdef 的概念，可以用来识别这些第三方库或者是自定义类型。在.flowconfig 的 [libs] 部分用来描述包含指定库定义的目录。

Vue 就是采用 Flow 进行静态类型检查的，在源码目录下可以看到一个 .flowconfig 文件，[libs] 指向 flow 文件夹，打开文件夹，文件结构是：

flow
├── compiler.js        # 编译
├── component.js       # 组件
├── global-api.js      # Global API
├── modules.js         # 第三方库
├── options.js         # 选项
├── ssr.js             # 服务端渲染
├── vnode.js           # 虚拟 node 
├── weex.js            # weex

可以看到，Vue.js 有很多自定义类型的定义。