フロー：javascriptコードの品質(zhì)を向上させるための靜的タイプチェッカー

Facebookが起動(dòng)する

Flowは、JavaScriptの靜的タイプチェッカーであり、通常はコードを変更せずにJavaScriptコードのタイプエラーを効率的に検出するように設(shè)計(jì)されており、プログラマーのワークロードを最小限に抑えます。

コアの利點(diǎn)：

• オプションのタイプチェック：特定のファイルを選択的にチェックできます。ファイルの上部に/*@flow*/コメントを追加して、Flowのタイプチェックを有効にします。
• タイプの推論と注釈：フローは、注釈を介してタイプを明示的に指定することをサポートし、柔軟で効率的なコードコンテキストを介してタイプの推論をサポートします。
• 厳密なnull値処理：flowはnull値を無(wú)視しず、他のタイプのシステムとは異なるnull値によって引き起こされるアプリケーションのクラッシュを効果的に防止します。
• ライブラリ定義のサポート：ライブラリ定義ファイル（libdefs）、フローは、サードパーティライブラリを使用するときにタイプエラーを回避できます。 libdefファイルには、サードパーティコードによって提供される関數(shù)またはメソッド宣言が含まれています。

一般的なjavaScriptエラーのネメシス

コードのバグを追跡するのに多くの時(shí)間を費(fèi)やしたことがありますが、最終的にエラーが単純で回避可能であることがわかりましたか？たとえば、関數(shù)パラメーターの順序が間違っていますか、それとも間違ったデータ型が渡されますか？ JavaScriptの弱いタイプのシステムと暗黙の型変換特性は、しばしば靜的に型付けされた言語(yǔ)では存在しないエラーにつながります。 Flowは、このような問題を解決するための強(qiáng)力なツールです。

2017年3月30日：フローライブラリの変更を反映するように記事が更新されました。

インストールと構(gòu)成

フローは、Mac OS X、Linux（64ビット）、Windows（64ビット）をサポートしています。それをインストールする最も簡(jiǎn)単な方法は、NPMを通じてです：

npm install --save-dev flow-bin

そして、プロジェクトのpackage.jsonセクションを追加してくださいscriptsファイル：

"scripts": {
  "flow": "flow"
}

次に、Project Root Directoryに

ファイルを作成します（.flowconfigを使用して、空の構(gòu)成ファイルを作成できます）。 npm run flow init

フローチェックを?qū)g行します

プロジェクトコードをチェックするには

コマンドを使用できますが、これはプロジェクト全體を毎回再確認(rèn)するため、最も効率的な方法ではありません。フローサーバーを使用することをお?jiǎng)幛幛筏蓼?。フローサーバーは、コードを徐々にチェックし、変更された部品のみを確認(rèn)することをお?jiǎng)幛幛筏蓼?。サーバーを起動(dòng)：npm run flow check; npm run flow npm run flow stop

オプションのタイプチェックとタイプ推論

フロータイプチェックはオプションです。チェックするファイルを選択して、ファイルの上部に

コメントを追加できます。

/*@flow*/フローは、主に2つの方法でタイプチェックを?qū)g行します。

• タイプアノテーション：コード內(nèi)の予想タイプを明示的に指定します。
• タイプ推論： flow変數(shù)の使用のコンテキストに基づいてタイプを?qū)Г蓼埂?

タイプ推論はコード変更のワークロードを減らし、タイプの注釈はより正確なタイプチェックを提供します。

null value処理とタイプアノテーション

フローは他のタイプのシステムとは異なり、null値を無(wú)視することはありません。これは、null値によって引き起こされるエラーを防ぐのに役立ちます。

タイプの注釈は、関數(shù)パラメーター、戻り値、および可変宣言に使用できるコロン:プレフィックスを使用します。

機(jī)能、アレイ、クラス、およびオブジェクトリテラルのタイプアノテーション：

• 関數(shù)： function add(x : number, y : number) : number { ... }
• 配列： var foo : Array<number> = [1, 2, 3];</number>
• カテゴリ： class Bar { x: string; y: string | number; ... }
• オブジェクトリテラル： var obj : { a: string, b: number, ... } = { ... };
• nullableタイプ： var foo : ?string = null;

ライブラリ定義（libdefs）

サードパーティライブラリを使用するときにタイプエラーを回避するには、ライブラリ定義ファイル（libdefs）を使用できます。 flow-typedツールを使用して、事前定義されたリブフェフをインストールするか、カスタムリブフェフを自分で作成できます。

タイプアノテーションを削除

ツールを使用して、コードからタイプの注釈を削除してブラウザで実行します。 flow-remove-types

概要

Flowは、JavaScriptコードをより堅(jiān)牢で容易に書くのに役立つ強(qiáng)力な靜的タイプチェッカーです。オプションのタイプチェック、タイプ推論、および厳密なヌル値処理により、JavaScriptコードの品質(zhì)を改善するための効果的なツールになります。

faq

フローを使用したより良いJavaScriptコードの作成に関するいくつかのFAQを次に示します：

• フローとは何ですか？なぜそれを使用する必要がありますか？ Flowは、Facebookが開発したJavaScriptの靜的タイプチェッカーです。これは、コードが実行される前にエラーを検出し、コードの堅(jiān)牢性と保守性を向上させるのに役立ちます。

• JavaScriptプロジェクトにフローをインストールして設(shè)定する方法は？ を使用してグローバルにフローをインストールし、npm install -g flow-binでプロジェクトを初期化し、タイプチェックを必要とするファイルにflow initコメントを追加します。 /*@flow*/

• フローを使用してJavaScriptコードのタイプを確認(rèn)する方法は？ 変數(shù)、関數(shù)パラメーター、および戻り値にタイプアノテーションを追加して、タイプチェックを行い、コマンドを?qū)g行します。 flow

• フローやタイプスクリプトなど、他のタイプのチェッカーの利點(diǎn)？ Flowのタイプシステムは柔軟性が高く、既存のJavaScriptコードとより良く統(tǒng)合されていますが、TypeScriptのツールとコミュニティサポートはより完全になります。

• フロー內(nèi)の値を処理する方法は？ nullフローは、チェックしていない場(chǎng)合、undefinedまたはになる値を許可しません。 null undefined if (value != null)

FlowはReactおよび他のJavaScriptライブラリで使用できますか？
• はい、FlowにはReactのサポートが組み込まれており、

  またはカスタムLibdefsを介して他のライブラリをサポートできます。 flow-typed

既存のJavaScriptプロジェクトを移動(dòng)して流れる方法は？
• 徐々に移行し、最初に一部のファイルでフローを有効にしてから、徐々にタイプのアノテーションを追加できます。
  上記の情報(bào)があなたに役立つことを願(yuàn)っています！

以上がフローでより良いJavaScriptを書きますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。