Flow之一个新的Javascript静态类型检查器


Posted in Javascript onDecember 21, 2015

今天我们兴奋的发布了 Flow 的尝鲜版,一个新的Javascript静态类型检查器。Flow为Javascript添加了静态类型检查,以提高开发效率和代码质量。更明确的说,静态类型检查提供的好处像早期错误检查,帮助你发现一些只有在运行时才能发现的错误,以及代码智能感知,它会帮助代码维护,查找,重构和优化。

Flow之一个新的Javascript静态类型检查器

我们设计Flow的所有功能构建在现有Javascript规范之上。因为Flow主动地在后台工作,所以额外的编译开销很小。Flow并不要求开发者如何编写代码 —— 她用一套复杂的算法分析你熟悉的代码风格。

Flow仍然在初期阶段,但是我们已经在Facebook使用了。我们希望你在自己的项目中愉快的使用,期待你的反馈。可以访问 flowtype.org 快速开始。

总览

Facebook超爱Javascript;它快,表达性好,而且到处运行,是构建产品的极佳语言。同时,因为没有静态类型让开发者困扰。Bug难以发现(比如,崩溃的原因隐藏很深),代码维护犹如噩梦(比如,在不知道所有依赖的情况下进行重构风险很大)。Flow改进了速度和效率促进了开发者在使用Javascript的生成效率。

在Javascript之上添加一层静态系统并不简单。Javascript的积木(building block)表现力极高,一个简单的类型系统并不能精确组合出应有的语义。为了支持不同的Javascript编程范式和习惯,Flow引入了类似数据流(data-flow)和控制流(control-flow)这类通常用于编译时提取语义的分析技术。然后用提取的信息,加上先进的类型原理来做类型推断。当然,仅有一个强力的静态类型分析还不够 —— Javascript代码库会很大,这要求类型检查必须闪电般快速,才能不打断开发者编辑-运行的流程。Flow按模块执行分析,所有的类型都限制在模块边界以内。这最终形成一个高度并行、增量式的检查架构,类似 Hack 。这使得类型检查响应快速,即使是百万行级别代码。

Flow的类型检查是选择性的 —— 你不需要一次性执行检查所有。然而,Flow背后的设计基于假定大多数Javascript的代码类型是隐式静态类型;虽然类型可能不会到处在代码中出现,它们是以一种可以按照代码正确性推理出来的形式存在于开发者的思路中。一旦可能,Flow就去推断这些类型,意味着它可以不需要改动代码就能发现类型错误。另一发面,一些如存在于框架中的Javascript代码,大量使用了反射使得静态类型推断非常困难。对于这种天然动态的代码,类型检查就会错漏百出,因此Flow提供对此类代码添加信任并继续。这种设计在Facebook内部被大量的Javascript代码库所验证:大多数代码没有通过隐式静态类型检查条目,这些条目让开发者可以不用添加注释就能检查代码类型错误。

这使得Flow从根本上区别于其他Javascript的类型系统(如TypeScript),通过弱化的假设大多数JavaScript代码是动态输入的,并由开发者自己表达哪些代码应该是静态类型。通常来看,这类设计会导致检查覆盖率降低:更少的类型错误被检测到,工具不够高效。然而对于某些情况下是合理的,一般这种设计如果没有通过大量额外的努力就无法对实际开发提供足够多的帮助。尽管如此,Flow让你可以简单就获得这种弱化的类型检查,对于现有代码非常有用。

为了解释这种区别,请看下面的例子:

function onlyWorksOnNumbers(x) {
 return x * 10;
}
onlyWorksOnNumbers(‘Hello, world!');

Flow能够发现这个错误(尝试把数字和字符串相乘),然而另一种更加保守的分析需要显式的标注 x 的类型。在这个玩具般的例子里面并不觉得费力,但是在巨型代码库里面几乎无人去做。Flow可以不用添加注释就能发现这个错误 —— 当然前提是开发者想这样做。

类型系统

Flow的类型系统实现了许多期望中的功能。支持标准基本类型( number ,  string , boolean ),类型之间的隐式转换在除一些特殊情形外是被禁止的。结构类型,如函数、对象和数组也被支持。类型可以是多态的。

也许你会感到意外,Flow没有把 null 和 undefined 当成是上述类型中的任何一种。这两种类型会有多种可能,使用这些类型必须在合理检查的保护之上。其它组合类型(如 string | number )也被支持,这种用法同样需要确保安全。Flow知道缩小类型范围时做动态检查的影响。

让我们用一个例子来描述处理 null 值。下面的程序总是在运行时崩溃,但是一般的类型系统会认为它没有问题:

function length(x) {
return x.length;
}
var total = length('Hello') + length(null);

Flow会在编译时期发现这个错误,并指出 x 可以是null( length 属性不应该被访问)。另外,Flow了解这个程序的控制流,所以简单修改就能让这个程序类型正确:

function length(x) {
 if (x !== null) {
 return x.length;
 } else {
 return 0;
 }
}
var total = length('Hello') + length(null);

Flow还了解JavaScript复杂的对象模型:构造器,方法,原型和它们动态扩展以及绑定。已经试验性去支持类型的复杂操作如:绑定对象,抽取keys等等。我们希望未来这些功能使得让为框架指定具体类型成为可能。

类型错误通常报告为定义和实际值不兼容:比如函数调用的参数不足,对象中不包含要访问的属性,或者把字符串当成数字使用。

最后,Flow支持动态类型( any ),这种类型可以绕过类型系统检查:比如可用 any 表示静态分析无法准确判断而报错的location(通常使用反射的情况)。另外Flow在弱模式下遇到上述类型且没有注释类型的话,会自动假定为 any 。

扩展性

为了拓展,Flow根据模块和其它模块的依赖关系以及其它模块提供的类型接口,单独对每个模块进行检查。要生成类型接口,Flow可能需要在模块边界上进行注释。

Flow在一个后台运行的持久化服务器上,维护着整个代码库的语义信息,一开始Flow会对整个代码做一次分析,然后当一系列文件改动的时候(可能是单个文件改动或者在切换分支的时候),服务器会增量式更新改动文件以及由于类型关联的其它相关文件的语义信息。这样,当开发者试图获取类型错误时,它们已经在服务器上了,相应几乎是立即的。这种服务器架构与 Hack 构建在同一种技术之上。

兼容性

Flow致力于支持最新的JavaScript标准。目前已经支持各种ES6特性如destructuring, classes, extended objects, optional function parameters,以及核心API扩展(比如Map, Set, Promise, 和 new methods on Object, Array, 和 Math)。其它特性(尤其是模块)正在开发中。Flow支持CommonJS / Node.js 规范的模块。

var Hello = React.createClass ({
 render: function() {
 return <div>Hello {this.props.name}</div>;
 }
});

如果你在JSX上使用的class名字有错误,Flow会发现这个问题:

React.render(, ...);

而且,如果你在React class里面使用了React.PropTypes规范,你可以对JSX上的attributes做静态类型检查:

var Hello = React.createClass ({
 propTypes: {
 name: React.PropTypes.string.isRequired
 }
 ...
});

Flow就会发现 <Hello/> 缺少属性的错误,或者 <Hello name={42}/> 属性类型的错误。

更多的关于支持React的细节可以在 文档 中找到。

开源

Flow代码大部分用OCaml实现。代码库在活跃更新并且会在未来几个月快速进化。除了在Facebook范围内的数据代码库中运行外,我们希望Flow的分析引擎能用于构建类似的,无论是JavaScript或者其他的语言工具。请让我们知道你是否想加入!

好了,关于Flow之一个新的Javascript静态类型检查器的全部内容先给大家介绍到这里,后续还会持续更新,敬请关注!

Javascript 相关文章推荐
我见过最全的个人js加解密功能页面
Dec 12 Javascript
url地址自动加#号问题说明
Aug 21 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
JavaScript判断文件上传类型的方法
Sep 02 Javascript
js实现防止被iframe的方法
Jul 03 Javascript
jQuery实现返回顶部功能
Feb 23 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 #Javascript
浅析JavaScript声明变量
Dec 21 #Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 #Javascript
深入浅析Node.js 事件循环
Dec 20 #Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 #Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 #Javascript
jQuery mobile 移动web(4)
Dec 20 #Javascript
You might like
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
python自动化测试之连接几组测试包实例
2014/09/28 Python
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
python学习开发mock接口
2019/04/28 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
销售人才自我评价范文
2014/09/27 职场文书
刑事撤诉申请书
2015/05/18 职场文书
KTV员工管理制度
2015/08/06 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
Redis IP地址的绑定的实现
2021/05/08 Redis
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers