Compositeパターン - TypeScriptでのツリー構造

Compositeパターン

Compositeパターンは、オブジェクトをツリー構造に組み合わせて部分-全体の階層を表現します。クライアントは共通のインターフェースを通じて個々のオブジェクト（リーフ）と合成（ブランチ）を統一的に扱えます。

統一的な扱いが重要な理由

Compositeなしでは、クライアントコードはリーフとコンテナオブジェクトを区別しなければなりません。Compositeでは、両方が同じインターフェースを実装し、操作がツリーを通じて自然に再帰します。

再帰操作

Compositeの美しさは、操作がツリーを自然に再帰することです。バンドルでgetPrice()を呼び出すと、深さに関係なく、すべてのネストされた製品とサブバンドルの価格が自動的に合計されます。

実世界のツリー

• DOM: すべてのHTML要素は子要素を含むことができます
• Reactコンポーネントツリー: コンポーネントは他のコンポーネントを含み、Composite階層を形成
• ファイルシステム: ディレクトリはファイルと他のディレクトリを含む
• 組織図: 部門はチームを含み、チームは従業員を含む

設計の考慮事項

Compositeの主な緊張関係は安全性 vs 透過性です。リーフノードにエラーをスローするadd()/remove()メソッドを持たせるべきか？それともこれらのメソッドはCompositeノードにのみ存在し、型チェックを必要とすべきか？現代のTypeScriptでは、共有基底を持つリーフとComposite用の別々のインターフェースが好まれます。