【React】型チェックツールFlow

TypeScriptでもPropTypesでもないReactの型チェックツールFlowについてまとめました。

Flowは、Create React App に未対応ですので自分でinstallする必要があります。

Flowを使用するための準備

まずはインストールします。

$ npm install flow-bin

以下コマンドで型チェックが行えるようになります。

そのためにpackage.jsonを編集します。

$ npm run flow

  "scripts": {
    "flow": "flow"
  },

上記の一行だけ追加します。

Flowの設定ファイルを記述します。

$ npm run flow init

これにより以下のファイルが生成されます。

[ignore]

[include]

[libs]

[lints]

[options]

[strict]

設定値が特に記述されていませんが、デフォルトの型チェックが実行されます。

設定を記述する場合、詳細についてはこちらに記載があります。

.flowconfig | Flow

Flow tries to work out of the box as much as possible, but can be configured to work with any codebase.

flow.org

Flowを使用する

型チェックを行いたいファイルの先頭行に「//@Flow」と記述することで、そのファイルを型チェックの対象とすることができます。

VSCodeであれば、Flowの拡張機能が存在します。

こちらをインストールする事により使用可能になります。

Flow Language Support - Visual Studio Marketplace

Extension for Visual Studio Code - Flow support for VS Code

marketplace.visualstudio.com

以上、お読みいただきありがとうございました。