Facebook Flow で Hello, world!

Facebook Flow 出ましたねー♪

とりあえず, 公式サイトにあるFive simple examples ってやつをやって,
ちゃんとチェック出来るんだよアピールを一通り受けたのでスタートアップ環境作ってみました.

Github で公開してます. check したり compile したりできます.

hello-flow

flow って何？

ざっくり言うと Facebook 製の TypeScript って感じですかね？
とはいえちゃんとしたコンパイラを提供しているわけではないので, JSLint みたいな
code checker 的な位置づけなのだろうか？ 今のところ.

見た感じだと AltJS によくある機能は一通り入ってて
ちょっと型に強いって印象です.

Top にあるように

/* @flow */
function foo(x) {
  return x * 10;
}
foo('Hello, world!');

は foo 内で * 演算子を使っているのできっと引数 x は数値だろうと
判定して, 文字列を渡して実行するとエラーを吐いてくれます.

とはいえ型に強いわりには型による関数オーバーロードサポートしてなかったりするので
型否定派の自分にはおそらく刺さらないだろうなぁw

flow をインストールしよう

zip ダウンロードしてパス通す方法もありますが,
自分は Homebrew でインストールしました.

$brew install flow

これで flow コマンド使えるようになります.

flow でチェック

コードの頭に

/* @flow */

と書くと flow のコードとして認識します.

flow を使ってコードチェックできます.
文法的に間違えてたり定義していない変数使ってたりするとエラー出してくれます.

flow check

カレントディレクトリにある .flowconfig を見てチェックしてくれるみたいです.
詳しくはこちら -> Link

hello-flow の

$./check.sh

で試せます.

flow のコードをコンパイル

今今は react-tools 使ってやるみたいです.
npm でグローバルインストールしちゃいましょう.

$npm install -g react-tools

これで jsx コマンドが使えるようになります.(Adobe や DeNA の jsx じゃないよw)

下記のコマンドは src フォルダにある flow のファイルをコンパイルして build に出力する例です.

$jsx --strip-types --harmony src/ build/

hello-flow の

$./build.sh

で試せます.

flow を触ってみて

まだ動かしてみてざっくり見てみただけなので
下手なことは書かないですmm

詳しくは @mizchi san や @vvakame san が書いてるのでそちらへ♪

自分は, runstant で flow 動かせるようにしたいので js runtime が出るのを気長に待つのみです...