2018年02月05日

Flowtype入門

Flowtypeをを導入するまでの道のり

cli編



まずはpackage.jsonを作成してBableとflowのpresetをインストールしておく。

npm init -y
npm install --save-dev babel-cli babel-preset-flow


scriptsにコンパイル用のコマンドと先ほどインストールしたbabelとpresetsを設定しておく。

  "scripts": {
"build": "babel src/ -d lib/",
"prepublish": "npm run build"
},
"babel": {
"presets": ["flow"]
},


次にflow-binをインストール

npm install --save-dev flow-bin


scriptsにflow用のコマンドを記述

  "scripts": {
"build": "babel src/ -d lib/",
"prepublish": "npm run build",
"flow": "flow"
},


npm run flowでflowが実行される

npm run flow initでは設定用の.flowconfigが作成される

script/app.js に以下のスクリプトを書いて

// @flow
const bar:string = 1


npm run flowを実行すると以下のようなエラーが出てると正解

Error: src/app.js:2
2: const bar:string = 1
^ number. This type is incompatible with
2: const bar:string = 1
^^^^^^ string


スクリプトを以下のように修正すると

// @flow
const bar:string = '1'


エラーは出なくなるはず

ちなみにこのままではブラウザは解釈できないので

npm run buildで出力された lib/app.jsをブラウザで読み込みましょう

エディタ編



いちいちコマンドを打つのが面倒くさいのでエディタでエラーがわかるように設定しておきます。

VSCodeでは「Flow Language Support」というオフィシャルプラグインをインストール。

設定で以下のように指定をしてflowのpathを先ほどのインストールしたローカルのファイルになるようにします。


"flow.pathToFlow": "${workspaceRoot}/node_modules/.bin/flow"


このままだと型宣言はTSでしか聞かないよ的なエラーが表示され続けるのでワークスペースの設定に以下の内容を追加しておきます。


"javascript.validate.enable": false
タグ:Flowtype REACT
posted by ねこまんま at 20:17 | Comment(0) | React | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。