Flow を使ってみる

Flow は Facebook 製の JavaScript 用型チェッカーです。JavaScript のコードを強力な型推論エンジンを使って型によるチェックをしてくれます。

JavaScript のコードのままでもチェックできますし、TypeScript と似た構文で型情報を教えてあげることもできます。TypeScript とくらべて素の JavaScript でも強力にチェックしてくれるのが強みです。

インストール

公式ドキュメント参照。 OS X の場合は brew install flow で簡単に入る。

インストールしたら最初に設定ファイルを作る。

$ flow init

これで .flowconfig というファイルが作られる。そこに除外するファイルなどを指定できる。

ついでにチェック用の JavaScript を書いておく。

/* @flow */
// a.js
var a = 'A';
a * 2;

@flow とファイルの先頭に書くとそのファイルを型チェックしてくれます。

a * 2 は文字列に数値をかけようとしているので実行時に NaN になります。これを実行する前に検知します。

JavaScript と同じディレクトリで flow check とすれば型チェックができます。

$ flow check

/path/to/project/a.js:4:1,1: string
This type is incompatible with
/path/to/project/a.js:4:1,5: number

Found 1 error

このようにエラーが発生します。

/* @flow */
// a.js
var a = 2;
a * 2;

このように var a の初期値を数値にすることで、エラーが消えます。既存の動いているコードでもチェックしてみるとバグが見つかるかもしれません。