起源
众所周知，js是一门弱类型的语言，类型转换往往隐含在各种业务代码中，同时也埋下了不少的坑。比如以下代码
|
1 2 3 4 5 6 7 8 9 |
// return string function getEnvVersion(){ return '1.1.1'; } // '1.1.1' > 0 => false, so nothing happen if(getEnvVersion() > 0){ // doSthAwesome(); } |
|
1 2 3 4 5 |
function size(obj){ return obj.length; } // uncaught error size(null); |
FLOW
于是flow出现了。flow是facebook推出的js类型检查工具，可以在编码时检查到类型错误并做出提示，避免将问题带上线。
安装
目前flow仅支持MacOS与Linux，可以直接在官网wget最新的二进制包到本地运行。
MacOS
Mac用户推荐使用brew install flow完成安装。
快速上手
只需要在待检查的js文件头部添加一行注释/* @flow */，然后在同一目录下运行flow check即可。
代码中增加类型检查，即可通过flow的检测了。
详细使用
类型标注
正如前文所说，js的类型转换很灵活，比如如下代码
|
1 2 3 4 |
function add(num1, num2){ return num1 + num2; } add(3, '0') |
结果会是多少呢？3? ’30’? 相信很多人知道，结果是’30’。绝大多数情况下，这不是我们想要的结果。如果让flow来检测这段代码，会是什么结果呢？
是的，flow不会报错，因为+操作符对于字符串和数字都是完全适用的，而且add函数也没有声明参数必须是数字。
加上类型标注之后，flow就检测到了。
是不是隐隐觉得有什么地方不对？没错，js不支持类型声明啊(/= _ =)/~┴┴ 这玩意上线怎么跑啊？
别急，这里使用了JSX的语法，使用对应的转换工具即可去掉类型声明用于生产环境。
|
1 2 |
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/
