初探flow.js

第一部分：前言　

　我们知道JS是弱类型语言，在声明变量时不论是什么类型的变量我们都用var即可，所以js是非常灵活的，但是同时问题就是弱类型语言有可能会出错，比如在调用函数时，且往往在运行起来时才可以检查，于是facebook开源了flow.js，它可以看做是强类型的js，即在声明变量时使用具体的类型名称，在运行前编译为正常的js即可。 flow.js的理念类似于typescript，但是他比typescript更轻，更容易迁移，因为我们只需要做出很小的改变就可以使用flow.js，而typescript却非如此，它就像一门新的语言，所以目前flow.js是非常流行的，包括vue也使用了flow.js。

　　flow.js官网

　　github

　　flow.js是前两年才出现的，当前版本为v0.49.1，目前在github上已经有了10000多star，可见flow.js还是非常流行的。 所以我们可以尝试在项目中使用flow.js。

　　官网上是这样介绍的：flow.js是用来为js做静态类型检查的。

　　flow.js的特点如下：

1. Code Faster。因为通过使用flow.js，我们可以减少很多不必要的错误 --- flow.js会在你敲代码的过程中就帮你检查代码中的错误，这样就不用再运行的时候不停地去寻找错误了。、
2. Code Smarter。对于像js这样的动态语言我们很难创建聪明的工具。而flow.js理解你的代码，使得你更聪明的写代码。
3. Code Confidently。 对代码做出巨大的改变是非常恐怖的。flow.js可以帮助你更快地重构，这样你就不用担心很多可能出现的问题了。
4. Code Bigger。 很多开发人员同时对一个项目开发是很困难的。而flow.js可以帮助你解决这个问题，因为即使是半年前写的代码，使用flow.js依然可以让你轻松看明白。

　　

第二部分：Getting Start

　　flow是用于检查js代码的静态类型检测器。 它做了很多工作以使得你写代码的效率更高效。使得你写的更快、更聪明、更自信并且写的代码是可以非常大的。

　　flow会通过静态类型注释来检测你错误的代码，这些类型允许你告诉flow你想让你的代码如何工作，并且flow将会保证它。 如下所示：

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

因为flow已经对js非常了解了，所以他不需要太多的类型，你应该做的仅仅是告诉flow必要的对于代码的描述然后flow就会做好剩下的工作了。 大部分时候，flow甚至可以不需要声明类型就理解你的代码。 如下所示：

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

你也可也以让flow不起作用，所以你可以尝试使用它和不使用的区别所在。

第三部分： Installation

　　对于安装flow，是有很多种方法的，这取决于你在项目中使用了哪些工具，比如，我们可以使用Yarn作为包管理工具，也可以使用npm作为包管理工具；我们可以使用Babel作为编译js的工具，也可以使用专用工具flow-remove-types。

安装编译器

　　首先，你需要安装编译器，可以在babel和flow-remove-types之前作出选择，Babel是一个js代码编译器并且是支持flow的。 首先安装 babel-cli 和 babel-preset-flow， 这里使用npm安装：

npm install --save-dev babel-cli babel-preset-flow

　　接着你应该创建一个.babelrc的文件在你的项目根目录下，并且包括下面的代码：

{
  "presets": ["flow"]
}

　　

安装flow

　　将flow-bin添加到devDependency。

npm install --save-dev flow-bin

　　接着添加一个‘flow’script到你的package.json中。

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

　　然后就可以运行了，第一次运行如下所示：

npm run flow init

　　在第一次运行flow之后，就可以像下面这样运行了：

npm run flow

　  注意：在使用的过程中可能会遇到一个问题，具体答案参考这篇文章。

　　

第三部分： 使用

　　一旦你安装好了flow，那么你一定想要感觉一下怎么最简单的开始使用flow，对于大部分的flow工程，你需要学习下面基本的模式：

• 初始化你的项目通过使用 flow init
• 开始flow后台进程使用flow
• 决定哪个文件将会被监视（monitor）使用// @flow
• 开始在你的项目中写flow代码。
• 检查你代码中的类型错误。

初始化你的项目

　　着手准备一个flow项目需要一行命令：

flow init

　　在你的项目的层级上来执行这条命令。在基本水平上，.flowconfig 告诉了flow 后台进程要进行flow检测的根目录。

　　这样你的项目现在就是支持flow的了。

.flowconfig是一个空文件是很常见的事情。 然后，你可以通过多种方式来配置以及个性化flow通过添加配置选项添加到.flowconfig中。

运行flow的后台进程

　　flow最重要的地方在于快速检测你代码中错误的地方，一旦你激活了项目中的flow，俺么你哭可以开启进程时flow以最快的速度检测你的代码错误。

flow status

　　这条命令首先开启了一个后台进程为了寻找错误来检测所有的flow文件。后台进程会持续运行，监视着你的代码的改变并且仪最快的速度来检查。

　　你也可以直接输入flow来完成相同的功能，因为status对于flow二进制文件来说是一个默认的flag。

　　只有一个后台进程运行到指定时间了，你才能运行flow status多次， 因为它会始终使用同一个进程。

　　为了停止后台进程，运行 flow stop。

准备为你的代码使用flow语法

　　flow后台进程会监视着所有的flow文件，然后，怎么样才能让他知道哪些文件时需要flow的呢？并且该如何监测呢？ 请将下面的代码放在一个js文件的代码最前面，这就是后台进程会监测的文件的标志：

// @flow

　　这个标志是现代JavaScript使用flow所需要的。 flow后台进程会汇集所有的有这个标记的文件并且使用所有有用的类型信息来确保一致性对于编程。

　　如果你的项目中没有这个flag，那么flow后台进程就会跳过并且忽略这些代码（除非你调用flow check --all）。

　　

写flow代码

　　既然所有的安装和初始化都已经完成了，那么现在你就可以开始着手准备些真正的flow代码了。 对于每一个你已经使用了// @flow标记的文件，你现在就对他有了完全的控制权利和类型检测权利，下面是一个flow文件的例子：

// @flow
 
function foo(x: ?number): string {
  if (x) {
    return x;
  }
  return "default string";
}

　　注意，这里的类型添加到了参数当中并且在函数的最后还指定了函数的返回类型。你可以从这个代码中判断出来这里再返回类型处有一个错误，因为这个函数可能放回一个int， 然而，你是不需要自己去用眼睛来检测观察代码错误的，因为flow后台进程将能够捕获到这个错误当你检查代码时。

　　

检查你的代码

　　使用flow.js最大的好处在于它几乎可以实时的给你代码状态的反馈，在任何事件你想要检查代码错误，直接运行 ：

flow

　　即可，这等效于使用flow status， 第一次运行flow，flow的后台进程需要检查你所有的文件，当再一次运行时，flow就会直接来给出结果了。 对于上面的代码，运行flow将会yield，如下：

test.js:
  :     return x;
                ^ number. This type is incompatible with the expected return type of
  : function foo(x: ?number): string {
                               ^^^^^^ string

　　

更多请看这里