初识 Flow

一、初识 Flow

Flow 是 Facebook 推出的 JavaScript 静态类型检查工具，通过静态类型注释检查代码，借助它，可使 JavaScript 代码更健壮。

二、为什么使用 Flow

JavaScript 是一种动态类型语言（解释执行语言），在代码执行前对其进行编译；由于其高度灵活性，在编译阶段表现正常，可到代码运行阶段可能会出现奇奇怪怪的 Bug。可见，需要在编译阶段暴露出其缺陷，减少在运行阶段出错；那么其解决方案是类型检查。

类型检查，其实是指在编译阶段尽可能早地发现由类型错误引起的 Bug，不需要等到运行阶段才做类型检查；能对类型做检查的工具有：Flow、TypeScript 等。

在 Vue2 框架中使用 Flow 作为静态类型检查工具，其原因是 Babel 和 ESLint 都有其对应的插件来支持语法，可以完全沿用现有的构建配置，改动成本非常小。

那么是否会有疑问：为什么不使用 TypeScript 作为类型检查工具呢？答案

三、如何使用 Flow

在讲解如何使用 Flow 之前，先来说说 Flow 检查类型的方式。Flow 有两种类型检查方式：类型推断和类型注释。

类型推断

类型推断是指根据变量所在的上下文来推断类型，然后根据该类型对变量进行类型检查。例子如下：

// @flow
function square(n) {
  return n * n; // Error!
}
square("2");

说明：如果要使用 Flow 工具，需要在文件首行添加：// @flow。

函数 square 用是求一个整数的平方，结合上下文推断出形参 n 数据类型为 number；而在调用函数时传的实参其数据类型是字符串，不符合要求，因此报错。

类型注释

类型注释是指事先指定数据类型，Flow 根据指定好的类型来检查变量数据类型是否符合期待的。例子如下：

// @flow
function square(n: number): number {
  return n * n;
}
​
square("2"); // Error!

函数 square 事先指定好变量及函数返回值类型：number；而调用函数时传递实参类型为字符串，不符合要求，因此报错。

Vue 项目中使用 Flow

• 安装依赖：npm install --save-dev flow-bin

• 配置 package.json

  {
    "name": "my-flow-project",
    "version": "1.0.0",
    "devDependencies": {
      "flow-bin": "^0.161.1"
    },
    "scripts": {
      "flow": "flow"
    }
  }
  

• 创建文件 .babelrc，配置 Flow

  { 
    "presets": ["flow"] 
  }
  

• 执行命令：flow init，在项目根目录下生成文件：.flowconfig

四、参考链接

• Flow
• 认识 Flow