flow.js 轻量级的 JavaScript 静态类型检查器

发布于 2020-03-29 11:22:04 字数 5939 浏览 1665 评论 0

我们知道 JS 是弱类型语言，在声明变量时不论是什么类型的变量我们都用var即可，所以js是非常灵活的，但是同时问题就是弱类型语言有可能会出错，比如在调用函数时，且往往在运行起来时才可以检查，于是 facebook 开源了 flow.js，它可以看做是强类型的 js，即在声明变量时使用具体的类型名称，在运行前编译为正常的 js 即可。

flow.js 的理念类似于 typescript，但是他比 typescript 更轻，更容易迁移，因为我们只需要做出很小的改变就可以使用 flow.js，而 typescript 却非如此，它就像一门新的语言，所以目前flow.js是非常流行的，包括 vue 也使用了 flow.js。

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

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

特点

编码更快

厌倦了不得不运行代码来查找错误的烦恼？flow.js 在您编码时识别问题。不要浪费时间猜测和检查。

代码更智能

很难为 JavaScript 之类的动态语言构建智能工具。Flow 理解您的代码并提供其知识，从而可以在Flow之上构建其他智能工具。

自信地编码

对大型代码库进行重大更改可能会令人恐惧。Flow可帮助您安全地进行重构，因此您可以专注于要进行的更改，而不必担心可能会破坏什么。

代码更大

与许多开发人员一起在代码库中工作可能使保持 master 分支正常工作变得困难。流可以帮助防止不良的基准。Flow可以帮助保护精心设计的库，防止滥用和误解。Flow可以帮助您了解六个月前编写的代码。

开始入门

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

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

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

square("2"); // Error!

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

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

square("2");

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

安装

对于安装 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:5
  5:     return x;
                ^ number. This type is incompatible with the expected return type of
  3: function foo(x: ?number): string {
                               ^^^^^^ string

更多请看这里

分享到QQ

分享到微博