Flow Strictを有効にしてより安全性の高いコーディングを行う

Flowを使っていれば型による安全性の高いコーディングが行えることは知っての通りです。

Flow: A Static Type Checker for JavaScript

今回は、Flow Strictについて見ていくことにします。

Flow Strict | Flow

Flow Strictとは何かというと、ファイル単位でより厳密な型チェックをするものです。
例えば、any/Object/Functionなどの曖昧な型を禁止したり、型付されたimport以外を禁止したりできます。

なぜこの挙動がデフォルトでないかというと、既存コードベースに簡単に導入できるように設計されているためです。
なので、Flowを使っているなら基本的にこれを有効化することをオススメします。
これによって、より多くの潜在的なバグを減らしリファクタリングが容易になります。

いくつかの設定可能なルールがありますが、詳しくは公式のページを見てください。
Lint Rule Reference | Flow

いくつかの設定を試してみます

まずはFlowのインストールと設定ファイルの作成をします。

yarn add --dev flow-bin
yarn run flow init

.flowconfig

[ignore]

[include]

[libs]

[lints]

[options]

[strict]

これに以下のように追加します。

[ignore]

[include]

[libs]

[lints]

[options]

[strict]
nonstrict-import
unclear-type
unsafe-getters-setters
untyped-import
untyped-type-import
sketchy-null
sketchy-number

有効化

ファイルごとに有効化します。今まで、@flowと書いていた場所に@flow strictと書くだけです。

- // @flow
+ // @flow strict

unclear-type

any, Object, Function のような弱い型を使うとエラーを表示します。

// @flow strict

function x(a: any) {}  // => error

function y(a: Function) {}  // => error

sketchy-number

個人的に非常に好きな機能です。

例えばReactで以下のようなコメント数を表示する機能があるとします。

{count && <div>{count} コメント</div>}

countが0の場合、countがfalseと評価されます。
0件のときは表示されてほしくはありませんからね。
ただ残念なことに、これだと0とだけ表示されてしまいます。最悪！

sketchy-numberが有効であればこれを検知します。

あとの修正は簡単です。

{count ? <div>{count} コメント</div> : null}

+α

Additionally, note that function parameters are considered const (i.e., treated as if they were declared with const rather than let). This feature is not yet configurable in Flow Strict; it is always on.

常に有効になる機能として関数の引数が常にconst扱いになります。
型があっているので、デフォルトだとエラーにならないですが、Flow Strictだとエラー扱いになります。

// @flow strict

function f(x: number) {
  x = 1 // => error
}

まとめ

flowを使っているならば有効化することをオススメします。
また、ドキュメントにも将来的にこれらの機能がデフォルトの挙動になる可能性があるとのことなので期待したいです。

Flow Strict | Flow

getter/setterは副作用があるし、邪悪なことをするときにしか使わない派なんだが、flow strictだとgetter/setter使った瞬間に型がキレるので便利 https://t.co/kKWEEeGN6n

— あかめ@猫の額爪の垢を煎じて飲む.js (@akameco) September 5, 2018