flow概要(javascriptの静的チェッカー)

flowについて学習する必要があったのでメモ

flowとは

Facebook(現meta)が初めて発表したJavaScript用の静的型チェッカー。

インストール

npm install --save-dev flow-bin

プロジェクトファイルにflowを加える

package.json

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

セットアップ

プロジェクトフォルダのルートに、.flowconfigという名前のコンフィグファイルを作成する

npm run flow init

以下のコマンドでプロジェクト全体のコードをチェックできる

npm run flow check

Flowの型チェックはオプトイン。
Flowでチェックしたいjavascriptのファイルの先頭に@flowコメントを加える

@flow

型推論

型チェックは2つの方法を使う

• アノテーションを使う方法
  予測する型をコードの一部として指定し、型チェッカーがその予測に基づいてコードを評価する
• コード推論による方法
  ツールが、変数が使われている文脈から方を賢く推論し、推論に基づいてコードをチェックする

型推論の例

example.js

/*@flow*/

function foo(string) {
  return string.split(",");
}

foo(1)

このコードは、foo関数が文字列を引数とするのに、数字を引数として渡しているのでエラーとなる

null許容型

Flowはnullを無視しないため、別の正当な型の代わりにnullが渡されて、アプリケーションをクラッシュさせるエラーを防ぐ

null_not_complie_example.js

/*@flow*/

function lengthCheck(string) {
  return string.length();
}

let length = lengthCheck(null);

上の例はFlowはエラーを表示する。解決するには以下のようにしないといけない

null_complie_example.js

/*@flow*/

function lengthCheck(string) {
  if (string === null) {
    return 0;
  }
  return string.length();
}

let length = lengthCheck(null);

型アノテーション

望ましい動作を規定するのに型アノテーションが使える。型アノテーションは、関数パラメーター、戻り値、変数に使える

関数

annotation_function_test.js

/*@flow*/
function addExample(x: number, y: number) : number {
  return x + y;
}

配列

annotation_array_test.js

/*@flow*/
let foo: Array<number> = [1,2,3];

クラス

annotation_class_test.js

/*@flow*/
class Bar {
  x: string;
  y: string;
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

オブジェクト

annotation_object_test.js

/*@flow*/
let object: {a: string, b: number, c: Array<String>, d: Bar} = {
  a: "hello",
  b: 20,
  c: ["morning", "afternoon", "night"],
  d: new Bar("foo", "bar")
}

Null

Tの代わりに、?Tと書くことで、どのTにもnull/undefinedを組み込むことができる

annotation_null_test.js

/*@flow*/
let null_test: ?string = null;

上の場合、null_testはnullまたは文字列になる

ライブラリを使う場合

サードパーティのライブラリを使う場合

• ライブラリ定義(libdef)を使う
• flow-typedを使う
• 自分のlibdefを作る

型アノテーションを取り除く

型アノテーションは、JavaScriptの文法ではないので、ブラウザで実行する前に取り除く必要があるので、ビルドツールを使って除く必要がある