Flowはfacebookが作ってるJSに型を書けるやつ.
今日ちょっと練習してみたところ良かった.練習に手頃なところから型でも書いてみるかとやっていたところ,FormDataにFileをappendするところで,それはFileじゃなくて?Fileで,nullになる場合もあるのでおかしいよって教えてもらったりした.型をつけるだけで不具合が見つかって,こういう世界もあるのか,という感じだった.fileがなかったらreturnする処理を足しておいた.
ちょっとずつ書いていけるのがよくて,このファイルは難しいことをしていて型が付くと恩恵を受けられそう,とか,このあたりはこれからがっつり開発するので先に型を付けておこう,といった進めかたができる.
最初はちょっと慣れない部分もあったけど,ちょっと練習したら普通に書けるようになった.シンタックスがちょっと増えるので,どこまでJSのシンタックスで,どこからFlowなのか,意識しないと,こんなのあったっけ?ってなるかもしれない.
あとは,周りではどちらかというとTypeScriptが流行っていて,Flow大好きな人がいないので,困ったときに自分でなんとかする必要がある.
Flowはコンパイラではなくチェッカーなので,コンパイルできないと動かない,という世界ではなくて,チェックしてくれるだけなので,チェックが通らなくて開発が止まったり不具合が出てるけどコンパイルを待っててリリースできなくて危機的状況になったり,ということはなさそう.嫌なら型を書かなければよいだけの話.
以下はメモ
- FLOW IS A STATIC TYPE CHECKER FOR JAVASCRIPT.
// @flow
でflow状態になる- 20分くらい書き忘れてぜんぜんチェックしてくれなくてハマった
- flow statusは現状の表示,flow checkは全部チェック
- flow-check –allで全部チェックしてくれる
// @flow
してないファイルも対象にチェックしてくれて手元では4900個エラー出た
- ドキュメント
- チートシート
- ブログ記事なのでやや怪しい気はする 情報は更新されてるのかそこそこ新しいバージョン(v0.42.0)に対応している
- http://www.saltycrane.com/blog/2016/06/flow-type-cheat-sheet/
- 設定は.flowconfig
this.hoge
とかにいきなり代入できなくなるhoge: string
とか書いておく https://flow.org/en/docs/types/classes/
- ブラウザのAPI
- lib/以下にいろいろある dom.jsにlocalStorageが置いてあったり https://github.com/facebook/flow/blob/95cb85d5e80e8bd5bbdd30d8d7a0a90bf773c938/lib/dom.js
- Reactとの兼ね合い
- Reactは標準で対応している https://github.com/facebook/flow/blob/master/lib/react.js
- https://flow.org/en/docs/frameworks/react/
- propTypes使わず,
props: Props
みたいになる
- node_modulesとの兼ね合い
- node_modulesは無視しないとチェック通らない
- 一方で無視したままだとnpmで入れたモジュールが見つからない(requireで怒られる)
- flow-typed(TypeScriptのtypingsみたいなの)
- 誰かが作ってくれた型があれば使える https://github.com/flowtype/flow-typed/
flow-typed install
するとpackage.jsonに入ってるのが全部インストールされてワイルドflow-typed search axios
して,気に入ったのをflow-typed install 'axios@0.15'
- 地味なライブラリは当然ない
- ライブラリの型を自分で書く
- あまり有名でないライブラリとか,型情報がみつからないときは自作する
- moduleとclassをdeclareして,classをexportするかんじ https://flow.org/en/docs/libdefs/
- Atomでチェックしたい
- flow-ideでチェックしてくれる
- 型情報補完したりしてくれて便利
- https://atom.io/packages/flow-ide