起源

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

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

FLOW

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

安装

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

MacOS

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

快速上手

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

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

详细使用

类型标注

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

结果会是多少呢?3? ’30’? 相信很多人知道,结果是’30’。绝大多数情况下,这不是我们想要的结果。如果让flow来检测这段代码,会是什么结果呢?
flow4
是的,flow不会报错,因为+操作符对于字符串和数字都是完全适用的,而且add函数也没有声明参数必须是数字。
加上类型标注之后,flow就检测到了。
flow5
是不是隐隐觉得有什么地方不对?没错,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/

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2015/07/flow-a-static-type-checker-for-javascript-from-facebook/

  1. rb 2017 年 7 月 27 日

    如果每次一点代码小改动,都手动运行flow check来检查所有文件,想想都觉得蛋疼。
    flow提供了后台静默运行的方式,可以只检测改变的文件部分。
    首先运行flow,此时会启动flow server,并展示当前所有文件的错误。当修改了文件之后,再次运行flow,即可展示最新的错误列表。

    为什么还得再次flow呢? 这还是蛋疼啊 推荐使用 flow-watch 或者fswatch

  2. 整形医生 2016 年 10 月 11 日

    不错 这个确实可以学习学习

  3. MrYan 2015 年 9 月 21 日

    用TypeScript吧——静态类型检查+“any”弱类型机制=强类型语言+经典OOP编程体验+大规模项目开发管控+高可读性可维护性。支持的工具有官方的Visual Studio 2013/2015/Code,还有第三方比如sublinetext等。TypeScript 1.6还增加了对React的支持。总之,TypeScript杠杠的,用了腰不酸了腿也不疼了,麻麻再也不担心我的js潜藏bug了。/笑抽/手斜 猛戳这里http://www.typescriptlang.org/

  4. ◕‿◕ME 2015 年 8 月 4 日

    那个官网没打开。试了一下,对于模块化定义的js文件,flow check无法检测;并且.flowconfig 配置ignore的文件加入(@flow)依旧检测错误

  5. 大米网 2015 年 8 月 3 日

    不错不错

发表评论