flow-typedで型情報を管理しやすくしてみた

js linter flow

flowで型を導入後、毎回importするのが面倒だなと感じるようになってきた。
flow-typedをつかえば型情報をグローバルに定義できるようなので、これでimport文書く手間をカットしたり型情報をうまく管理できるのでは...

ということで今回は、flow-typedをつかって型情報を楽に管理できる方法について書き残そうと思う。

目次

  1. flow, eslintを使えるように準備
  2. flow-typedのインストール
  3. flow-typedディレクトリ作成と.flowconfigの記述
  4. 定義ファイルをつくって動作確認
  5. サードパーティライブラリの型定義を利用してみる

1. flow, eslintの準備

以前作成した記事通りに準備します。 本記事では、割愛させてもらいます。

2. flow-typedのインストール

npm i -D flow-typedを実行する

3. flow-typedディレクトリと設定ファイル

下図のようにrootディレクトリにflow-typedというディレクトリを作成する。
このディレクトリに型定義ファイルを保存していく。
自分で作成したものやreduxなどのサードパーティのライブラリものが保存される。

.
├── .eslintrc.json
├── .flowconfig
├── flow-typed <- つくりました
├── node_modules
├── package-lock.json
├── package.json
└── src

.flowconfig

[ignore]

[include]

[libs]
flow-typed
[lints]

[options]

[strict]

型定義ファイルを保存したディレクトリがどこか指定する。
上記のとおり[libs]に対して、先程作成したflow-typedディレクトリを記述する

4. 型定義ファイルをつくって動作確認

1. 直下にファイルを作成する

flow-typed/sampleType.js

type SampleType = {
  id: number,
  name: string
};

src/sample.js

const obj: SampleType = {
  id: '21',  <- (1)
  name: "SampleName"
};

sample.jsファイル内にimport type {SampleType} from './path'の記述はない
そして、(1) は数値ではないので、エラーとなる。

2. ディレクトリをきってもglobalにロードしてくれる

flow-typed/myModule/myType.js

declare type MyType = {
  uid: number,
  address: string,
  tel: number,
};

これでimport文なしに型チェックしてくれる。

4. サードパーティライブラリの型定義を利用してみる

./node_module/.bin/flow-typed install redux@4
で公開されたreduxの型情報をダウンロードできる。
ファイルは、flow-typedディレクトリに作成される。 あとは、3.の同様に使用できる。

しかし、この場合global空間を汚染させないように作られるため、import文は必要となる。

さいごに

でもflowよりもtypescriptのほうが、人気なんだよね...

参考サイト

flow公式
flow-typed