React NativeにFlowを導入する

react native flow react-native react native

こんにちは、こんちゃんです。

最近React Nativeを書き始めて、その中でFacebook製の静的解析ツールであるFlowを導入した時の話をしようと思います。

はじめに

React NativeでFlowを選んだ理由としては導入のしやすさとメルカリの記事を見たからでした。

speakerdeck.com

環境 2018/3/8現在

react-native ver 0.54.0

yarn ver 1.5.1

flow-bin ver 0.66.0

いざ導入

公式のドキュメントを見てやれば余裕やろ（鼻ほじ）って思ってました。

flow.org

ドキュメントに従って yarn run flow (タンッ！) って打つと大量のエラーが押し寄せてきました。

f:id:kazumasaSS:20180308155657p:plain

なんじゃこれーーって思って見ると node_module が解析対象内になっていたらしくそこでエラーが出ていました。
とりあえず、node_moduleを解析対象外にするために .flowconfig内の[ignore]セクションの設定をしました。

[ignore]
.*/node_modules/.*

これで大丈夫かと思ってもう一度走らせて見るとまた別のエラーが。。。

f:id:kazumasaSS:20180308151718p:plain

node_moduleを解析対象外にしたせいでreact-nativeのモジュールが見つからないと言われてしました。

解決策

まず、libdefs.jsというファイルを作成しましょう

touch libdefs.js

libsdef.jsでは必要なライブラリの定義を行います。

declare module 'react-native' { declare module.exports: any; }

そのあとは.flowconfig内の[libs]セクションに設定を追加します。
.flowconfigファイルの[libs]セクションは、コードの型チェック時に指定されたライブラリ定義をインクルードします。
また、libdefs.js自体は静的解析の対象にしたくないので[ignore]セクションに追加します。

[ignore]
.*/node_modules/.*
./libdefs.js

[libs]
./libdefs.js

これで yarn run flow を走らせると

f:id:kazumasaSS:20180308160356p:plain

今度はうまくいきました。 次回以降ではReact Nativeで開発していく上での困ったことやTipsを記事にできればと思っています。