Überblick

Das Composite-Muster modelliert Teil-Ganzes-Hierarchien, indem Blätter und Container dieselbe Schnittstelle erhalten. Ein Ordner verhält sich wie eine Datei: Beide haben ein size(), beide können gerendert werden. Die Implementierung des Containers delegiert einfach an seine Kinder und aggregiert die Ergebnisse. Der gesamte Teilbaum wird rekursiv manipulierbar, ohne dass der Client ein einziges isFolder schreibt.

Wann verwenden

• Deine Domäne ist ein Baum (DOM, Dateisystem, Menüstruktur, Organigramm).
• Aufrufer sollen ein einzelnes Element oder einen ganzen Teilbaum auf dieselbe Weise bearbeiten können.
• Mit der Zeit kommen neue Blatt- oder Composite-Typen hinzu und du willst, dass sie sich einfügen, ohne Aufrufer anzufassen.

Beispiel

interface FileSystemNode {
  size(): number;
}

class FileNode implements FileSystemNode {
  constructor(private readonly bytes: number) {}
  size() { return this.bytes; }
}

class FolderNode implements FileSystemNode {
  private children: FileSystemNode[] = [];
  add(node: FileSystemNode) { this.children.push(node); return this; }
  size() { return this.children.reduce((sum, c) => sum + c.size(), 0); }
}

const root = new FolderNode()
  .add(new FileNode(120))
  .add(
    new FolderNode()
      .add(new FileNode(50))
      .add(new FileNode(30))
  );

console.log(root.size()); // 200