LoginSignup
1
2

More than 5 years have passed since last update.

Flowtypeで外部module用のjs.flowを書く

Last updated at Posted at 2017-12-26

前提

Objective-C → C#ときて
最近本格的なjsのプロジェクトにjoinしたjs初心者です。

今回のプロジェクトには型チェッカーとしてFlow
https://flow.org/
が採用されてるのですが、ここでハマりにハマったので整理としてまとめておきます

なぜFlowか

javascriptといえば型がないのが特徴ですが、
近年jsによる大規模開発が増えてくる中で、
やっぱり型があったほうがいいよねという声もあったようで、
MicroSoftによる型対応のjsスーパーセットである
TypeScriptがメジャーになっているようです。

じゃあTypeScript使えばいいじゃんといきたいところですが、
TypeScriptを使う際は一度トランスコンパイルを行なって
生のjsにする必要があります

Flowには comment-based syntax
https://flow.org/en/docs/types/comments/
というFlowの型定義をコメント内に書いておける仕組みがあるため
Flowの恩恵を受けながらも生のjsとして使えるという利点があります。

外部モジュール

npmで入れた外部モジュールを使う際は、
外部モジュールの型定義を行う必要があります。

メジャーなモジュールの型定義は

FlowTyped
https://github.com/flowtype/flow-typed
にある可能性があるのでそちらをインストールすればOKですが、
ここにない場合は自分で書く必要があります

具体的には

.flowConfigに
.flowConfig
[libs]
flow-typed
modules

上記のように指定したフォルダに
hogehoge.js.flowを作る必要があります。

外部モジュールの定義をどこまですればいいのかが問題ですが、
hogehoge.js.flow
declare module 'hogehoge' {
}

上記のようにトップレベルの定義だけして済ますのでは
あまり意味がないので、ある程度の型指定はしておきたいところです。
("ある程度"が難しいところですが...

他にチェックすべきところとして
ある程度の基本の型やBOM,DOMといった必須パーツの定義は予めされているので
こちらに則るのが良いと思われます。
FlowCheatSheet
https://www.saltycrane.com/flow-type-cheat-sheet/latest/

おわりに

jsでコードを書いていると、現状一番時間を食っているのが
外部モジュールのflow定義のような気がしています...
早くflowとお友達になりたい。

追記
未確認ですが、tsファイルからflow定義を作成するgeneratorがあるようなので
https://github.com/joarwilk/flowgen
tsで書かれたモジュールであれば自動生成が可能かもしれません

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2