Help us understand the problem. What is going on with this article?

facebook/flow 実践編

More than 5 years have passed since last update.

先に書いたfacebook/flowファーストインプレッション - Qiitaでは自分でコード書いたりしなかったんだけど、今回はちゃんと手触り込みで。

Hello World!

mkdir flow-playground
cd flow-playground
flow init
vim hello.flow.js
/* @flow */

function foo(x) {
  return x * 10;
}

foo('Hello, world!')
flow check

型エラー起こしてみる

~/s/flow-playground $ flow check
/Users/mizchi/sandbox/flow-playground/hello.js:4:11,22: number
This type is incompatible with
  /Users/mizchi/sandbox/flow-playground/hello.js:3:37,42: string

Found 1 error

たぶんここじゃ伝わらないけど、出力がめっちゃカラフル

Classes

/* @flow */

class A {
  a: number;
  constructor(public prop: number){
  }
}

new A(3);

TypeScriptにあるコンストラクタ初期化はない。

/Users/mizchi/sandbox/flow-playground/classes.js:5:15,20: Use of future reserved word in strict mode

というわけでこれは通る

/* @flow */

class A {
  a: number;
  constructor(prop: number){
    this.a = prop;
  }
}

new A(3);

Union and Type Alises

/* @flow */

class A {
  a: number;
  constructor(prop: number){
    this.a = prop;
  }
}

class B {
  b: number;
  constructor(prop: number){
    this.b = prop;
  }
}

type T = A | B | string;

var x: T = new A(3);

まあ動く。

lambda function

試してたら次のエラーが出た

/* @flow */
var _: any = require('lodash');
var arr: number[] =  _.map([1,2,3], (n: number) => n * n);
console.log(_.map([1,2,3], (n) => n * n));
/Users/mizchi/sandbox/flow-playground/requiring.js:4:39,39: Unexpected token :

(n: number) => {}
この構文はまだサポートしてないのかな?

require

sub.js

/* @flow */

module.exports = function(n: number): number{
  return n * n;
}

main.js

/* @flow */

var sub = require('./sub');
sub('hoge');
~/s/flow-playground $ flow check

/Users/mizchi/sandbox/flow-playground/main.js:4:5,10: string
This type is incompatible with
  /Users/mizchi/sandbox/flow-playground/sub.js:3:30,35: number

ちゃんとrequire先の型をみてくれてる!

コンパイル

react-toolsつかえとのこと

npm install -g react-tools

どうでもいいんだけど react-toolsでjsxコマンド入るのなんでや

~/s/flow-playground $ jsx --strip-types --harmony classes.js 
built Module("classes")
/* @flow */



  function A(prop)        {"use strict";
    this.a = prop;
  }




  function B(prop)        {"use strict";
    this.b = prop;
  }





var x    = new A(3);

たしかに!!!!!

hoge.flow.jsをnode環境でrequireできるようにする

nodeでrequireするとき、拡張子がhoge.flow.jsだったら上の変形を書けて読み込むようにする。

でっち上げるためにさっくりcoffeeで書いた。

fs = require 'fs'
reactTools = require('react-tools')
require.extensions['.flow.js'] = (module, filename) ->
  code = fs.readFileSync(filename).toString()
  transformed = reactTools.transform(code, {harmony: true, stripTypes: true})
  module._compile(transformed)

require './hello.flow.js'

これでflow checkしつつnode環境で動かすことが出来そう。
あとで読み込み部分はnpm packageにしておく。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした