Flow(Facebookの静的型チェックライブラリ)を数分間いじると、面白いことが起こります。 JavaScriptのタイピングは、シンプルで便利だと感じ始めます。 – 楽しい。

自分で見て。

FWIW、FlowはReactの優れたパートナーですが、どのJSコンテキストでも魅力のように機能します。

インストール

$ cdをお気に入りのjust-messingプロジェクトに入れるか、 ReactCLIツールを使用して$create-react-appsomething-disposableをすばやく実行します。

いずれの場合も、ルートディレクトリから、次のコマンドを実行する必要があります。

$ npm i -D flow-bin
$ flow init

それは一言で言えばインストールです。 フローをインストールします。 (少なくともこのイントロでは)空白の.flowconfigファイルを作成します。 そこからどのように進むかは、少し複数の選択肢があります。

  • create-react-appを使用しましたか?かっこいいです。 フローと自動的に連携します。

  • 独自のBabel構成を使用しますか? $ npm i -D transform-flow-strip-types を実行してから、 “plugins”:[transform-flow-strip-types]を追加しますから.babelrcに、(名前が示すように)コードからフロータイプを削除します。

  • トランスパイルはありませんか?これもすばらしいですが、この記事の最後に記載されている特別なコメント構文を使用する必要があります。

    覚えておくべきことは、Flowはアプリケーションの整合性を検証するための単なるツールであるということです。 JavaScriptインタープリターは、そのアノテーションをどう処理するかについての手がかりがないため、実行前に消える必要があります。


使用する

プロジェクトにFlowが追加されたので、次はそれを機能させます。 まず、タイプチェックするファイルにタグを付けて、それぞれの上部に次のコメントを付けます。

/* @flow */

Flowはサーバーを実行して、チェックを段階的に維持し、コードを変更しても迅速に実行します。 プロジェクトで$flowを実行して開始します。 これで、同じコマンドを使用していつでもチェックを実行できます。 信じられないほど満足のいくNo errors!レスポンス、または次のようなプレイごとの内訳が得られます。

Looks like a type mismatch

フローは注釈を使用してタイプを伝達します。 それらは直感的ですが、必要に応じて詳細かつ複雑にすることができます。 いくつかの例:

let name: string = "Ol' Bonesnapper";
let age: number = 32;
let hungry: boolean = true;
let faves: string[] = ['tires', 'nutria'];
let eyes: {left: string, right: string} = {left: 'blind', right: 'good'};

関数は同じように動作しますが、独自の好奇心があります。

function chomp(food: string): string { // We're annotating both the input and the output
  return name + ' ate a ' + food;
}

フローは、リテラル値( let foodSpecies:’ Myocastor coypus ‘ = ‘ Myocastor coypus ‘ など)、クラス、およびこの範囲を超えるタイプの連祷でもうまく機能します。プライマー。 良いニュースは、チームがドキュメント素晴らしい仕事をしたことです。

基本は以上です。

上記のコメント構文に関しては、フローアノテーションがJSインタープリターから見えなくなるため、コンパイルを掘り下げない場合は便利ですが、実装するのは面倒です。人間。 次のようになります。

let name/*: string */= "Ol' Bonesnapper";
let age/*: number */= 32;
let hungry/*: boolean */= true;
let faves/*: string[] */= ['tires', 'nutria'];
let eyes/*: {left: string, right: string} */= {left: 'blind', right: 'good'};
function chomp(food/*: string*/)/*: string*/ {
  return name + ' ate a ' + food;
}

👉賢明な言葉:フローは深く強力なツールです。 ここでは表面をかじっただけですが、その美しさの多くは、「学ぶ瞬間、習得する数週間」のデザインにあります。