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

liangzai_cool 发布于2019-08-19 17:15 / 2916人阅读

摘要：原文链接翻译于今天我们兴奋的发布了的尝鲜版，一个新的静态类型检查器。为添加了静态类型检查，以提高开发效率和代码质量。这最终形成一个高度并行增量式的检查架构，类似。知道缩小类型范围时做动态检查的影响。

原文链接：https://code.facebook.com/posts/1505962329687926/flow-a-new-static-type-checker-for-javascript/

Avik Chaudhuri Basil Hosmer Gabriel Levi

caisijie 翻译于 2015/12/21

今天我们兴奋的发布了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。
更多关于类型系统可以查看 documentation.

扩展性

为了拓展，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 Hello {this.props.name};
 }
});

如果你在JSX上使用的class名字有错误，Flow会发现这个问题：
React.render(, ...);

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

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

Flow就会发现缺少属性的错误，或者属性类型的错误。

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

开源

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

云服务器混合云静态类型检查购买一个新的主机静态代码检查 java静态检查

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78346.html

Flow - JS静态类型检查工具

摘要：介绍是个的静态类型检查工具，由出品的开源码项目，问世只有一年多，是个相当年轻的项目。现在，提供了另一个新的选项，它是一种强静态类型的辅助检查工具。 showImg(https://segmentfault.com/img/bVH6mL?w=1200&h=675); 本章的目标是提供一些Flow工具的介绍与使用建议。Flow本质上也只是个检查工具，它并不会自动修正代码中的错误，也不会强制...

seanHai 2019-08-20 13:39 评论0 收藏0
JS 静态类型检查工具 Flow

摘要：本文主要介绍了解决作为弱类型语言没有类型检查痛点的静态类型检查工具，并且介绍了在中使用的方法，最后介绍了一些常用的语法。本文主要介绍了解决JS作为弱类型语言没有类型检查痛点的静态类型检查工具 Flow ，并且介绍了在WebStorm中使用Flow的方法，最后介绍了一些常用的Flow语法。 1. 简介 JS作为一种脚本语言是没有类型检测的，这个特点有时候用着很方便，但在一个较大的项目中...

CloudDeveloper 2019-08-22 16:17 评论0 收藏0
JavaScript类型检查之Flow

摘要：一是一种弱类型动态类型检查的语言。动态类型与静态类型的核心区别动态类型的类型检查是是在代码运行的时候进行的，静态类型的类型检查则是在编译时进行。一、js是一种弱类型、动态类型检查的语言。弱类型：在定义变量时，可以为变量定义复制任何数据，变量的数据类型不是固定死的，这样的类型叫做弱类型。 var a = 10; a = abc; a = []; a = function() {}...

zhonghanwen 2019-08-23 18:41 评论0 收藏0
webpack实战

摘要：和类似的预处理器还有等。的用处非常多，包括给自动加前缀使用下一代语法等，目前越来越多的人开始用它，它很可能会成为预处理器的最终赢家。 webpack实战查看所有文档页面：全栈开发，获取更多信息。快马加鞭，加班加点，终于把这个文档整理出来了，顺便深入地学习一番，巩固知识，就是太累人，影响睡眠时间和质量。极客就是想要把事情做到极致，开始了就必须到达终点。原文链接：webpack实战，原...

cyrils 2019-08-22 17:32 评论0 收藏0
vue2.0项目配置flow类型检查

摘要：在的项目中加入类型检查。当前项目是用写的，当项目越来越大，由于弱类型的特性，相比这种强类型的语言而言，后期维护会越来越困难。为了解决这个问题，决定使用加入类型检查。一了解是公布的静态类型检查器。中配置配置，使其支持语法。在vue2.0的项目中加入flow类型检查。当前项目是用js写的，当项目越来越大，由于js弱类型的特性，相比ts(typescript)这种强类型的语言而言，后期维护...

Rocko 2019-08-20 16:01 评论0 收藏0