微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

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

2015-08-13 20:14 前端大全

(点击上方,可快速关注)


作者:百度EFE - ielgnaw

网址:http://efe.baidu.com/blog/css-lints/


起源


众所周知,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/




前端大全

微信号:FrontDev

打造东半球最好的 前端技术 微信号

--------------------------------------

商务合作QQ:2302462408

招聘和猎头服务QQ:2302462408

投稿网址:top.jobbole.com

 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 ASP.NET运行时详解 集成模式和经典模式 [Hackathon]24个创意&挑战性de问题等你来挑战 [实践] Android5.1.1源码 - 让某个APP以解释执行模式运行 Kubernetes和Borg的设计哲学 | 精彩视频 上海传智播客网页班五期,你就放过我们吧