flowtypeに入門してみる

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

最後に

既存のソースコードを壊すことなく、型チェックの仕組みを追加できるのはいいですね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください