TypeScriptモジュールのまとめ方

ずっとフォルダ整理を続けてきて、1モジュール単位を整理するにあたってようやく「とりあえずこうやれば...」というパターンが掴めた。

サンプル

とある機能fooに関する構成単位はこんな感じ。(React Componentとか特定の文脈は想定していない)

foo/
  index.ts <-- foo (エントリーポイント)
  constants.ts
  subdir-foo/
    subModuleA.ts
    subModuleB.ts
  subdir-bar/
    subModuleC.ts
    subModuleD.ts

観点の詳細について

フォルダに収めるかどうか、という2パターンに分別されます。

フォルダに収める

ボリュームが多く、型や定数を分けたい場合にこうなる。
つまりメインモジュールに大抵適用している。

export type FooParam = ...

export type HOGE = ...

const foo = ...

export default foo

フォルダに収めない

ボリュームが少なく、型や定数を分けなくても見やすいだろうと思うとき。
つまりサブモジュールに大抵適用している。

type FooParam = ...

type HOGE = ...

const foo = ...

export default foo

備考

当然、typesやconstantsも1モジュール単位でやるほどのボリュームならフォルダ化します。

その他

• export default許容or禁止はこの話題には入りません。
• ライブラリ作るとかでなければ再exportは要らないと思います。import文がシュッと短くなる以外のメリットが薄く、面倒くさい。

書くまでもなさそうな内容ですが、なんとなくやっていることを言語化できた記念です。