Flowとは
flowは、JavaScriptのコードに対して静的な型チェックを行います。
プログラムのバグを早い段階で発見できます。
インストール
プロジェクトのフォルダーに移動して「npm init」を実行します。
npm init
「package.json」ファイルが作成されました。
flow本体とコマンドラインインターフェースをインストールします。
npm install --save flowtype flow-bin
package.jsonの「scripts」に「”flow”: “flow”」を追加します。
{
"name": "flowtest",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"flow": "flow"
},
"author": "",
"license": "ISC",
"dependencies": {
"flow-bin": "^0.32.0",
"flowtype": "^1.0.0"
},
"description": ""
}
「flow init」を実行します。
rpm run-script flow init
「.flowconfig」ファイルが作成されました。
型をチェックする
「flow check」で型をチェックします。
rpm run-script flow check
実行結果は次のようになりました。
Found 0 errors
チェックするソースコードがないので、エラーはありませんでした。
「index.js」ファイルを作成する
「index.js」ファイルを作成します。
// @flow
function add(num1, num2) {
return num1 + num2;
}
var x = add(3, '0');
console.log(x);
型チェックします。
rpm run-script flow check
実行結果は次のようになりました。
Found 0 errors
エラーにはなりませんでした。
関数に型を指定する
関数の引数と戻り値の型を指定します。
// @flow
// 引数と戻り値の型を指定する
function add(num1: number, num2: number): number {
return num1 + num2;
}
var x = add(3, '0');
console.log(x);
型チェックします。
rpm run-script flow check
実行結果は次のようになりました。
index.js:6
6: var x = add(3, '0');
^^^^^^^^^^^ function call
6: var x = add(3, '0');
^^^ string. This type is incompatible with
3: function add(num1: number, num2: number): number {
^^^^^^ number
Found 1 error
エラーを検出しました。
number型の引数にstringを渡していることがエラーになっています。
エラーになっている箇所を修正します。
stringではなく、numberを渡します。
// @flow
function add(num1: number, num2: number): number {
return num1 + num2;
}
var x = add(3, 2); // 引数を修正する
console.log(x);
型チェックします。
rpm run-script flow check
実行結果は次のようになりました。
Found 0 errors
ソースコードから型を削除する
ソースコードから型を削除するには、「flow-remove-types」を使用します。
「flow-remove-types」をインストールします。
npm install --save flow-remove-types
index.jsから型を削除したoutput.jsを作成します。
node node_modules\flow-remove-types\flow-remove-types index.js > output.js
output.jsが作成されました。
//
function add(num1 , num2 ) {
return num1 + num2;
}
var x = add(3, 2);
console.log(x);
Flow Comments形式
ソースコードに型を記述する形式に、Flow Comments形式があります。
型をJavaScriptのコメントとして記述するため、ソースコードはそのままJavaScriptとして実行できます。
// @flow
function add(num1/*: number */, num2/*: number */)/*: number */ {
return num1 + num2;
}
最後に
既存のソースコードを壊すことなく、型チェックの仕組みを追加できるのはいいですね。