flow–facebook出品的javascript静态类型检查器

起源

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


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

FLOW

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

安装

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

MacOS

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

快速上手

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

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

详细使用

类型标注

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


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

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

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


以上命令可以让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/

1 1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部