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

自分で見て。

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

インストール

$cdをお気に入りに追加 just-messing React CLI ツールをプロジェクトまたは使用して、 $ 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! このような応答またはプレイごとの内訳:

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

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;
}

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