draft-js で Flow を使う

TL;DR

• node_modules/draft-js/lib/Draft.js.flow に @flow が無いことが原因
• node_modules/draft-js/lib/Draft.js.flow に @flow を追加すれば暫定的には解決する
• バグ報告済みなので本家が対応してくれることを祈る

バージョン

• draft-js 0.10.1
• flow 0.47.0

問題

draft-js のドキュメントに書かれているように

import {EditorState} from 'draft-js';

とインポートしたとき、 EditorState が Flow で検査されない。

原因

Flow は 0.19.0 からあるファイルをインポートしたとき、同じ名前で .flow で終わるファイルが同じディレクトリにあった場合、そのファイルを見るようになっている。（詳しくは Version 0.19.0 のブログを参照）

また package.json を見れば分かるように、 draft-js の main ファイルは lib/Draft.js なので、 import {EditorState} from 'draft-js' は内部的に lib/Draft.js を見に行く。そして draft-js の npm package の中を見てみると lib/Draft.js.flow というファイルが存在している。

しかし、このファイルは @flow がついていないので、このファイルからインポートしたオブジェクトが全て any になってしまっている。

解決方法

暫定的な対処としては draft-js を使っているプロジェクトで node_modules/draft-js/lib/Draft.js.flow に @flow を追加すれば Flow を有効化することが可能。

他の方法としては、他の .flow ファイルにはだいたい @flow がついているので、 'draft-js' ではなく個別の定義ファイルからインポートする方法もある。例えば EditorState なら

import EditorState from 'draft-js/lib/EditorState';

しかし、このインポートパスはドキュメント等で明示されていないので、将来的に変わる可能性があるのと、いちいち lib/Draft.js の中を読んで対応するファイルを発見しないといけないので面倒。（EditorState はたまたまオブジェクト名とファイル名が一致しているが、例えば RichUtils は lib/RichTextEditorUtil.js にある）

GitHub に issue があり、原因と解決策を報告したのでそのうち直ることを期待したい。