随着 JavaScript 代码越来越复杂，类型检查成为了代码质量保证的重要手段之一。Flow 是 Facebook 推出的 JavaScript 静态类型检查工具，它可以在编写代码时进行类型检查，避免一些常见的错误。但是，由于 Flow 只是一个 JavaScript 的扩展，它的类型注解并不会被浏览器或者 Node.js 直接支持。这就需要使用 Babel 把代码编译成浏览器或者 Node.js 可以运行的代码，并且要保留 Flow 类型信息。
Babel 的插件
Babel 是一个 JavaScript 编译器，它可以把新版本的 JavaScript 代码转换成旧版本的 JavaScript 代码，让我们可以在现有的浏览器或者 Node.js 环境下运行新的 JavaScript 代码。Babel 是通过插件的方式来实现不同的转换的。在保留 Flow 类型信息的情况下，我们需要使用下面这些插件：
@babel/preset-flow：这个插件可以让 Babel 理解 Flow 的类型注解，并且把类型注解从代码中去掉。@babel/plugin-transform-flow-strip-types：这个插件可以移除 Flow 的类型注解，并且保留类型信息。
配置 Babel
我们需要在 Babel 的配置文件中添加上面这两个插件。假设我们的 Babel 配置文件是 .babelrc，那么我们需要添加下面这些配置：
{
"presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-flow"],
"plugins": ["@babel/plugin-transform-flow-strip-types"]
}这里我们同时添加了 @babel/preset-env 和 @babel/preset-react，因为我们可能会同时使用新的 JavaScript 特性和 React，这两个插件可以把新的 JavaScript 特性和 React 转换成旧版本的 JavaScript 代码。
示例代码
假设我们有一个 JavaScript 文件 example.js，它包含了 Flow 的类型注解：
// @flow
function add(a: number, b: number): number {
return a + b;
}
console.log(add(1, 2));
console.log(add(1, "2"));我们可以使用 Babel 编译这个文件，并且保留 Flow 的类型信息：
$ npx babel example.js --out-file example-compiled.js
编译后的代码如下：
function add(a, b) {
return a + b;
}
console.log(add(1, 2));
console.log(add(1, "2"));可以看到，类型注解已经被移除了，但是类型信息仍然保留在代码中。这样，我们就可以在浏览器或者 Node.js 环境下运行这个代码，并且在运行时进行类型检查。
总结
在使用 Flow 进行 JavaScript 类型检查时，我们需要使用 Babel 来编译代码，并且保留类型信息。这需要使用 @babel/preset-flow 和 @babel/plugin-transform-flow-strip-types 这两个插件。在配置 Babel 时，我们需要同时添加其他需要的插件，比如 @babel/preset-env 和 @babel/preset-react。通过这样的方式，我们可以在代码运行之前进行类型检查，避免一些常见的错误。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65693e7ad2f5e1655d1c7ee4