検索
ホームページウェブフロントエンドjsチュートリアルフロー、新しい Javascript 静的型 checker_javascript スキル

本日、新しい 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静态类型检查器的全部内容先给大家介绍到这里,后续还会持续更新,敬请关注!

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScriptの文字列文字を交換しますJavaScriptの文字列文字を交換しますMar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します:内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換()メソッドを使用することです。 str = str.replace( "find"、 "置換"); この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace(/fi

独自のAjax Webアプリケーションを構築します独自のAjax Webアプリケーションを構築しますMar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか? Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか?独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか?Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか?ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか?Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか?ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか?Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

jQueryマトリックス効果jQueryマトリックス効果Mar 10, 2025 am 12:52 AM

マトリックスの映画効果をあなたのページにもたらしましょう!これは、有名な映画「The Matrix」に基づいたクールなJQueryプラグインです。プラグインは、映画の古典的な緑色のキャラクター効果をシミュレートし、画像を選択するだけで、プラグインはそれを数値文字で満たされたマトリックススタイルの画像に変換します。来て、それを試してみてください、それはとても面白いです! それがどのように機能するか プラグインは画像をキャンバスにロードし、ピクセルと色の値を読み取ります。 data = ctx.getimagedata(x、y、settings.greasize、settings.greasize).data プラグインは、写真の長方形の領域を巧みに読み取り、jQueryを使用して各領域の平均色を計算します。次に、使用します

シンプルなjQueryスライダーを構築する方法シンプルなjQueryスライダーを構築する方法Mar 11, 2025 am 12:19 AM

この記事では、jQueryライブラリを使用してシンプルな画像カルーセルを作成するように導きます。 jQuery上に構築されたBXSLiderライブラリを使用し、カルーセルをセットアップするために多くの構成オプションを提供します。 今日、絵のカルーセルはウェブサイトで必須の機能になっています - 1つの写真は千の言葉よりも優れています! 画像カルーセルを使用することを決定した後、次の質問はそれを作成する方法です。まず、高品質の高解像度の写真を収集する必要があります。 次に、HTMLとJavaScriptコードを使用して画像カルーセルを作成する必要があります。ウェブ上には、さまざまな方法でカルーセルを作成するのに役立つ多くのライブラリがあります。オープンソースBXSLiderライブラリを使用します。 BXSLiderライブラリはレスポンシブデザインをサポートしているため、このライブラリで構築されたカルーセルは任意のものに適合させることができます

Angularを使用してCSVファイルをアップロードおよびダウンロードする方法Angularを使用してCSVファイルをアップロードおよびダウンロードする方法Mar 10, 2025 am 01:01 AM

データセットは、APIモデルとさまざまなビジネスプロセスの構築に非常に不可欠です。これが、CSVのインポートとエクスポートが頻繁に必要な機能である理由です。このチュートリアルでは、Angular内でCSVファイルをダウンロードおよびインポートする方法を学びます

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン