フロー、新しい Javascript 静的型 checker_javascript スキル-jsチュートリアル-php.cn

本日、新しい Javascript 静的型チェッカーである Flow の早期採用バージョンをリリースできることを嬉しく思います。 Flow は静的型チェックを Javascript に追加して、開発効率とコード品質を向上させます。具体的には、静的型チェックには、実行時にのみ見つかるエラーを見つけるのに役立つ早期エラーチェックや、コードのメンテナンス、検出、リファクタリング、最適化に役立つコードインテリジェンスなどの利点があります。

Flow のすべての機能は、既存の JavaScript 仕様に基づいて構築されるように設計されています。フローはバックグラウンドでアクティブに動作するため、追加のコンパイルオーバーヘッドは最小限に抑えられます。 Flow では、開発者がコードを記述する必要はありません。複雑なアルゴリズムのセットを使用して、使い慣れたコーディングスタイルを分析します。

Flow はまだ初期段階ですが、Facebook ではすでに使用しています。ぜひご自身のプロジェクトでご活用いただき、フィードバックをお待ちしております。 flowtype.org にアクセスすると、すぐに始めることができます。

概要

Facebook は Javascript を愛しています。Javascript は高速で表現力があり、どこでも実行でき、製品を構築するのに最適な言語です。同時に、開発者は静的型付けの欠如に悩まされています。バグを見つけるのは難しく (たとえば、クラッシュの原因は深く隠されています)、コードのメンテナンスは悪夢です (たとえば、すべての依存関係を把握せずにリファクタリングを行うのは非常に危険です)。 Flow は、JavaScript を使用する開発者の速度と効率を向上させます。

JavaScript の上に静的システムのレイヤーを追加するのは簡単ではありません。 Javascript の構成要素は表現力が非常に高いため、単純な型システムでは適切なセマンティクスを正確に組み合わせることができません。さまざまな Javascript プログラミングパラダイムと習慣をサポートするために、Flow では、コンパイル時にセマンティクスを抽出するために通常使用されるデータフローや制御フローなどの分析テクノロジを導入しています。次に、抽出した情報を使用して、型推論を行うための高度な型原則を追加します。もちろん、強力な静的型分析だけでは十分ではありません。JavaScript コードベースは非常に大きくなる可能性があるため、開発者の編集と実行のプロセスを中断しないように、超高速の型チェックが必要です。フローは、すべてのタイプをモジュール境界に制限して、モジュールごとに分析を実行します。これにより、最終的には、Hack に似た、高度に並列化された増分チェックアーキテクチャが実現します。これにより、数百万行のコードであっても、型チェックの応答性が非常に高くなります。

フローの型チェックはオプションです。すべてを一度にチェックする必要はありません。ただし、Flow の背後にある設計は、ほとんどの Javascript コード型が暗黙的に静的に型付けされることを前提としています。型はコードのどこにでも現れるわけではありませんが、コードの正確さに基づいて開発者が推測できる形式で存在します。フローは可能な限りこれらの型を推論します。つまり、コードを変更せずに型エラーを見つけることができます。一方で、フレームワークに存在する Javascript コードなど、一部のコードではリフレクションが多用されており、静的型の推論が非常に困難になっています。この種の自然に動的なコードの場合、型チェックはエラーでいっぱいになるため、Flow はそのようなコードに信頼を追加して続行する機能を提供します。この設計は Facebook の大規模な Javascript コードベースによって内部的に証明されています。ほとんどのコードは暗黙的な静的型チェックエントリを渡さないため、開発者はコメントを追加せずにコードタイプエラーをチェックできます。

これにより、ほとんどの JavaScript コードが動的に型付けされるという前提が弱まり、どのコードが静的に型付けされるべきかを表現するのは開発者に任されるため、Flow は他の JavaScript 型システム (TypeScript など) とは根本的に異なります。通常、このタイプの設計ではチェックカバレッジが低くなり、検出される型エラーが少なくなり、ツールの効率も低下します。状況によっては合理的ですが、一般にこの設計は、多くの追加の努力をしなければ実際の開発に十分な支援を提供しません。それにもかかわらず、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就会发现缺少属性的错误，或者属性类型的错误。

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

开源

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

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