前言

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

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

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

Flow安装与使用

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

• 直接从Flow的发布页面下载可运行档案，加到计算机中的PATH(路径)，让

  flow

  指令可以在命令列窗口访问即可。

• 透过npm安装即可，可以安装在全局(global)或是各别项目中。下面为安装在项目中的指令:

npm install --save-dev flow-bin

• macOS中可以使用homebrew安装:

brew update
brew install flow

• 透过OCaml OPAM套装管理程序打包与安装，请见Flow的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标记的代码

[p]注: 有些脚手架就已经装好与设置好这个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的使用方式不是只有上面说的这种命令列指令，你可以视项目的使用情况来进行设置。[/p]
阅读更多