Flow-JS静态类型检查工具

ゝ一纸荒年。 2022-05-26 23:43 212阅读 0赞

# **前言** #

在使用vue-grid-layout插件的时候，运行时报错

![70][]

然后就发现该js中使用typescript，查阅资料发现，[Flow][]是个JavaScript的静态类型检查工具，由Facebook出品的开源码项目，简单来说，它是对比TypeScript语言的解决方式。那么下面将介绍我是如何解决这个问题的。

Flow的介绍点解此链接进行了解   [https://segmentfault.com/a/1190000008088489][https_segmentfault.com_a_1190000008088489]

# Flow安装与使用 #

Flow目前可以支持macOS、Linux(64位元)、Windows(64位元)，你可以从以下的四种安装方式选择**其中一种**:

*  直接从Flow的[发布页面][Link 1]下载可运行档案，加到计算机中的PATH(路径)，让`flow`指令可以在命令列窗口访问即可。
 *  透过npm安装即可，可以安装在全局(global)或是各别项目中。下面为安装在项目中的指令:

npm install --save-dev flow-bin

*  macOS中可以使用homebrew安装:

brew update
    brew install flow

*  透过OCaml OPAM套装管理程序打包与安装，请见Flow的[Github页面][Github]。

## Flow简单使用三步骤 ##

### 第1步: 初始化项目 ###

在你的项目根目录的用命令列工具输入下面的指令，这将会创建一个`.flowconfig`文档，如果这文档已经存在就不需要再进行初始化，这个设置档一样是可以加入自定义的设置值，请参考[Advanced Configuration][]这里的说明，目前有很多项目里面都已经内附这个设置档，例如一些React的项目:

flow init

### 第2步: 在代码文档中加入要作类型检查的注释 ###

一般都在代码档案的最上面一行加入，没加Flow工具是不会进行检查的，有两种格式都可以:

// @flow

或

/* @flow */

### 第3步: 进行检查 ###

目前支持Flow工具插件的代码编辑工具很多，常见的Atom, Visual Studio Code(VSC), Sublime与WebStorm都有，当有安装搭配代码编辑工具的插件时，编辑工具会辅助显示检查的讯息。不过有时候会有点卡顿的要等一下，因为检查速度还不是那么快。

或是直接用下面的命令列指令来进行检查:

flow check

在Visual Studio Code中因为它内建TypeScript与JavaScript的检查功能，如果要使用Flow工具来作类型检查，需要在用户设置中，加上下面这行设置值以免冲突:

"javascript.validate.enable": false

## 转换(编译)有Flow标记的代码 ##

> 注: 有些脚手架就已经装好与设置好这个babel拓展插件，你不用再多安装了。

在开发的最后阶段要将原本有使用Flow标记，或是有类型注释的代码，进行清除或转换。转换的工作要使用babel编译器，这也是目前较推荐的方式。

使用babel编译器如果以命令列工具为主，可以使用下面的指令来安装在全局中:

npm install -g babel-cli

再来加装额外移除Flow标记的npm套件[babel-plugin-transform-flow-strip-types][]在你的项目中:

npm install --save-dev babel-plugin-transform-flow-strip-types

然后创建一个`.babelrc`设置档案，档案内容如下:

{
      "plugins": [
        "transform-flow-strip-types"
      ]
    }

完成设置后，之后babel在编译时就会一并转换Flow标记。

下面的指令则是直接把`src`目录的档案编译到`dist`目录中:

babel src -d dist

当然，babel的使用方式不是只有上面说的这种命令列指令，你可以视项目的使用情况来进行设置。

[70]: /images/20220527/0b6d26afe0c94720859553b2c850be72.png
[Flow]: https://flowtype.org/
[https_segmentfault.com_a_1190000008088489]: https://segmentfault.com/a/1190000008088489
[Link 1]: https://github.com/facebook/flow/releases
[Github]: https://github.com/facebook/flow
[Advanced Configuration]: https://flowtype.org/docs/advanced-configuration.html
[babel-plugin-transform-flow-strip-types]: https://www.npmjs.com/package/babel-plugin-transform-flow-strip-types