前端必备工具之 npm 包 "brackets-flow"-JavaScript中文网-JavaScript教程资源分享门户

介绍

"brackets-flow" 是一个可以帮助前端开发者进行代码静态类型检查的 npm 包，它采用了 Facebook 出品的 Flow 框架，可以在代码保持原貌的情况下，给代码进行类型注解并进行检查。还可以提供其它一些代码检查的功能，如 ESLint，具体请见 brackets-flow 官网。

你可以通过 npm 包管理器来安装 "brackets-flow"。

npm install -g brackets-flow

这样安装好 "brackets-flow" 之后，我们就可以愉快地开始编写静态类型检查的代码了！

"brackets-flow" 支持 CLI 和编辑器插件两种方式，我们先看 CLI 的用法。

假设我们有一个叫做 test.js 的文件。

function add(a, b) {
  return a + b;
}

add('1', '2');

这段代码的问题是：在类型不一致的情况下仍然能通过执行。我们可以使用 "brackets-flow" 进行静态类型检查。

在终端中进入到 test.js 文件所在的目录，执行以下命令：

brackets-flow check --all test.js

--all 表示对 js 文件中的所有函数进行静态类型检查，如果不加 --all 参数，则只对根函数进行类型检查。

输出如下：

test.js:5
  5: add('1', '2');
         ^^ string. This type is incompatible with the expected param type of number

Found 1 error

说明 add 函数的参数类型不对，应该传入数字，我们在代码中传入了字符串。得到这个错误提示后，我们可以很容易地在函数调用处进行修改，避免代码中出现无法预料的情况。

"brackets-flow" 还支持在编辑器中使用，这样就不用每次在终端中执行命令了。

本文以 VS Code 作为编辑器，具体操作如下：

{
  "javascript.validate.enable": false, // 先关闭内置校验功能
  "flow.useNPMPackagedFlow": true, // 指定使用安装在项目本地的 flow 包
}

配置完成后，在编辑器中打开 test.js 文件，输入以下代码：

// @flow

function add(a: number, b: number) {
  return a + b
}

add(1, '2')

在代码文件的顶部添加 // @flow 标识，这个标识告诉 Flow 本文件需要进行类型检查。

此处 add 函数需要传入两个参数，并且参数类型是 number，然后我们在函数调用处传入了字符串。

如果在配置文件中正确指定了 flow 的 bin 文件路径，则 VS Code 会在编辑器中进行类型检查，并提示错误信息。

此外，还可以通过在编辑器中使用插件 ESLint 来对代码进行规范化和检查，具体请参考 ESLint 的使用教程。

"brackets-flow" 可以和 TypeScript 兼容，因为它们都采用了相同的内敛注解语法，所以无需担心两者之间的干扰。
「使用范围」: Flow 是一个静态类型检查工具，它并不能替代运行时错误检查。Flow 的主要作用是在代码编写阶段就避免一些可能出现的问题，减少运行时报错的概率。所以 Flow 并非一个必须的工具，它的使用范围取决于项目的复杂程度，以及开发者的编程风格。
Flow 相对于 TypeScript 来说还算年轻，在生态上可能存在不足，需要根据不同的项目需求选择合适的工具。

本文对 "brackets-flow" 的基础使用进行了介绍，同时还简要介绍了它的原理和注意事项。使用 "brackets-flow" 静态类型检查，可以有效避免常见的编码错误，提高代码健壮性和可读性。希望这篇文章能够让读者有所收获，更好地使用 "brackets-flow"，为项目贡献力量。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066c82ccdc64669dde4d46