TypeScriptモジュールのまとめ方
2994 ワード
ずっとフォルダ整理を続けてきて、1モジュール単位を整理するにあたってようやく「とりあえずこうやれば...」というパターンが掴めた。
サンプル
とある機能fooに関する構成単位はこんな感じ。(React Componentとか特定の文脈は想定していない)
foo/
index.ts <-- foo (エントリーポイント)
constants.ts
subdir-foo/
subModuleA.ts
subModuleB.ts
subdir-bar/
subModuleC.ts
subModuleD.ts
観点の詳細について
フォルダに収めるかどうか、という2パターンに分別されます。
フォルダに収める
ボリュームが多く、型や定数を分けたい場合にこうなる。
つまりメインモジュールに大抵適用している。
foo/types.ts
export type FooParam = ...
foo/constants.ts
export type HOGE = ...
foo/index.ts
const foo = ...
export default foo
フォルダに収めない
ボリュームが少なく、型や定数を分けなくても見やすいだろうと思うとき。
つまりサブモジュールに大抵適用している。
foo.ts
type FooParam = ...
type HOGE = ...
const foo = ...
export default foo
備考
当然、typesやconstantsも1モジュール単位でやるほどのボリュームならフォルダ化します。
その他
- export default許容or禁止はこの話題には入りません。
- ライブラリ作るとかでなければ再exportは要らないと思います。import文がシュッと短くなる以外のメリットが薄く、面倒くさい。
書くまでもなさそうな内容ですが、なんとなくやっていることを言語化できた記念です。
Author And Source
この問題について(TypeScriptモジュールのまとめ方), 我々は、より多くの情報をここで見つけました https://zenn.dev/yhase_rqp/articles/805aa14e661ec1著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol