Flow の型アノテーションを Babel と組み合わせて使う方法を調べてみました。

インストール

型アノテーションをパースできるようにするプラグインと、型アノテーションを消すプラグインがあるのでそれを使えばいいみたいです。

$ npm install -g babel-cli flow-bin
$ npm install -D babel-plugin-syntax-flow babel-plugin-transform-flow-strip-types babel-preset-es2015

flow を使うために .flowconfig を生成しておきます。

$ flow init

Flow による型チェック

エラーがでる JavaScript を用意しました。

// @flow
// src/a.js

const add = (a: number, b: number) => a + b;

class A {
    a(x: string) {}
}

new A().a('string');
new A().a(); // error
new A().b(); // error

add(1, 2);
add('a', 'b'); // error

型チェックを走らすとエラーが出ます。

$ flow check src

Babel で変換

これを普通に Babel で変換しようとすると a: number が構文エラーになるので、 .babelrc にプラグインを追加しておきます。

{
    "presets": [
        { plugins: ["syntax-flow", "transform-flow-strip-types"] },
        "es2015"
    ]
}

これで問題なく変換してくれます。

$ babel -d out src

これだと変換前にチェックが走らないので、実際は先に flow を走らせる感じかもしれません。

$ flow check src && babel -d out src

こういう型チェックが必要なときは TypeScript を使うと思いますが、 Babel の機能が使いたかったりする場合はこうやって組み合わせて使うと便利かもしれません。