起源

众所周知，js是一门弱类型的语言，类型转换往往隐含在各种业务代码中，同时也埋下了不少的坑。比如以下代码

// return string
function getEnvVersion(){
    return '1.1.1';
}

// '1.1.1' > 0 => false, so nothing happen
if(getEnvVersion() > 0){
    // doSthAwesome();
}

function size(obj){
    return obj.length;
}
// uncaught error
size(null);

类似的情况数不胜数，通过jshint工具做一些编码规范可以规避一些问题，但由于js过于灵活，还是有许多无法检查到的隐患。

FLOW

于是flow出现了。flow是facebook推出的js类型检查工具，可以在编码时检查到类型错误并做出提示，避免将问题带上线。

安装

目前flow仅支持MacOS与Linux，可以直接在官网wget最新的二进制包到本地运行。

MacOS

Mac用户推荐使用brew install flow完成安装。

快速上手

只需要在待检查的js文件头部添加一行注释/* @flow */，然后在同一目录下运行flow check即可。

代码中增加类型检查，即可通过flow的检测了。

详细使用

类型标注

正如前文所说，js的类型转换很灵活，比如如下代码

function add(num1, num2){
    return num1 + num2;
}
add(3, '0')

结果会是多少呢？3? ’30’? 相信很多人知道，结果是’30’。绝大多数情况下，这不是我们想要的结果。如果让flow来检测这段代码，会是什么结果呢？

是的，flow不会报错，因为+操作符对于字符串和数字都是完全适用的，而且add函数也没有声明参数必须是数字。
加上类型标注之后，flow就检测到了。

是不是隐隐觉得有什么地方不对？没错，js不支持类型声明啊(/= _ =)/~┴┴ 这玩意上线怎么跑啊？
别急，这里使用了JSX的语法，使用对应的转换工具即可去掉类型声明用于生产环境。

npm install -g jstransform
jstransform --strip-types --harmony --watch src/ build/

以上命令可以让jstransform在后台检测src目录下的文件，并实时编译到build目录下。

开发环境与持续集成

flow server

如果每次一点代码小改动，都手动运行flow check来检查所有文件，想想都觉得蛋疼。
flow提供了后台静默运行的方式，可以只检测改变的文件部分。
首先运行flow，此时会启动flow server，并展示当前所有文件的错误。当修改了文件之后，再次运行flow，即可展示最新的错误列表。
相比flow check，flow server省去了每次检查全部项目文件的开销，也可以更好地与IDE工具结合。
当不需要flow server时，运行flow stop即可关闭。

持续集成

既然使用了flow做代码检查，自然也希望在构建工具中添加flow检查的步骤。grunt和gulp都有对应的flow插件。
也可以在package.json声明依赖，直接npm run [task]运行。由于flow是用OCaml语言写的，npm上只有对应的二进制包。
npm install flow-bin

Windows

目前flow暂时没有windows的支持，不过最近官方貌似在issues宣布开始准备支持了。所以耐心等待吧~

结语

对于js越来越复杂的应用场景，类型检查的优势也渐渐凸显。flow的目标是通过一点点代码的改动就发现文件中的类型错误，功能上确实很强大。
本文仅是flow工具的简单介绍，更多使用帮助请戳http://flowtype.org/docs/getting-started.html

参考文档：http://flowtype.org/docs/getting-started.html
https://code.facebook.com/posts/1505962329687926/flow-a-new-static-type-checker-for-javascript/