Flowを使った静的型検査の導入 #JavaScript

Reactをv15->16にアップデートした際、既存プロジェクトへ Flow の導入をしてみたので、
その手順のまとめ。

※今回の記事では導入方法のみを解説して、PropTypesの代わりにpropsの型定義をする方法などは別記事でまとめる予定です。

0 - Flowとは？なぜ導入？

Flow - https://flow.org/
JavaScriptの変数に静的な型定義を追加できるようにし、その妥当性をチェックできる仕組み。

Reactには元からPropTypesというコンポーネント属性に対する型チェックの仕組みがあったが、v16からは別パッケージへ切り離されたのとstate等の型もチェックしたかったので今回Flowの導入を行った。
ベンダーはReactと同じfacebookなので少し安心感もある。

1 - Flowのインストール

Flowの本体とコマンドラインインターフェースをインストール

（型検査のためのモジュール）

yarn add -D flow-bin

babel-plugin-transform-flow-strip-types プラグインをインストール

（babelビルド時に型宣言の除去を行わせる）

yarn add -D babel-plugin-transform-flow-strip-types

eslint-plugin-flowtype プラグインのインストール

（Flowの型定義つきJSをESLintに通るようにする）

yarn add -D babel-eslint eslint-plugin-flowtype

加えて、parser を babel-eslint に変更する必要あり

.eslintrc に

{
  "parser": "babel-eslint",
  "plugins": ["flowtype"],
  "rules": {
    ...
  }
}

ESLintルール（rules）の設定は 4 - ESLint ルールの設定にて

VSCodeにFlow Language Supportプラグインをインストール

{
  "flow.pathToFlow": (eg; "${workspaceRoot}/node_modules/.bin/flow")
  "javascript.validate.enable": false,
  "flow.useNPMPackagedFlow": true
}

2 - node_modulesをチェック対象外にする

.flowconfig に

[ignore]
.*/node_modules/.*

を追加

3 - flow-typedで外部モジュールの型定義を読み込む

FlowはReact本体の型定義しか知らないため、外部モジュールを使用しての型検査には定義ファイルを別途読み込む必要がある。
flow-typedというリポジトリーからこれらの定義ファイルの読み込みが可能。

yarn global add flow-typed
flow-typed install

flow-typed - https://github.com/flowtype/flow-typed

モジュールによってはこれでカバーされないため、libsに自分で型定義を記述する。

4 - ESLint ルールの設定

.eslintrcにflowの設定を行うことにより、どういった状況でエラーを出すのか指定することができる。

プラグインによる recommended設定

まずは、用意されているrecommended設定を使うのが便利。

.eslintrc

{

...

  "extends": [
    "plugin:flowtype/recommended"
  ],
  "plugins": [
    "flowtype"
  ]
}

rulesへのカスタマイズルールの設定

また、"rules": にエラーを出したいルールを追加することができる。
ここに記述をしないと、変数宣言や関数戻り値などに型定義を忘れても教えてくれないので注意。

記述例）

{
  ...

  "rules": {

    ...

    "flowtype/require-variable-type": [2],
    "flowtype/require-return-type": [2, "always",
      {
        "excludeArrowFunctions": "expressionsOnly",
        "excludeMatching": ["constructor", "render", "mapStateToProps", "mapDispatchToProps"]
      }
    ],
    "flowtype/no-weak-types": [2, {
      "any": true,
      "Object": true,
      "Function": false
    }]
  }
}

解説

・`flowtype/require-variable-type`

変数宣言時に型定義を必須とする

・`flowtype/require-return-type`

関数の戻り値型定義を必須とする
excludeArrowFunctionsでアロー関数の除外、excludeMatchingで除外したい関数名を設定できる。

・`flowtype/no-weak-types`

anyなど曖昧な型定義を制限できる
今回のケースでは、any,Objectは不可、Functionは可としている。

その他ルールは公式GitHubを参照：https://github.com/gajus/eslint-plugin-flowtype#eslint-plugin-flowtype-rules

5 - Flowの記法

型検査したいファイルの先頭に

/* @flow */

TypeScriptのように

  let a: number = 1;

と型定義

公式: https://flow.org/en/docs/react/components/#toc-stateless-functional-components

6 - 型検査の実行

yarn run flow

Flowを使った静的型検査の導入

0 - Flowとは？ なぜ導入？