This lesson follows Bridge. It uses composition too, but organizes objects into a recursive tree.

Composite lets a client treat one object and a group of objects through the same interface. A container delegates to its children, which can be leaves or more containers. The cost is finding an operation that makes sense for both.

Start from a real tree

An order box contains a book and a smaller accessory box. The small box contains a cable and a plug. A client wants the price. It should not need an instanceof branch at every depth to distinguish a product from a box.

interface PricedItem { price(): number }
class Product implements PricedItem {
  constructor(private amount: number) {}
  price(): number { return this.amount; }
}
class Box implements PricedItem {
  private children: PricedItem[] = [];
  add(item: PricedItem) { this.children.push(item); }
  price(): number {
    return this.children.reduce((sum, item) => sum + item.price(), 0);
  }
}

const accessories = new Box();
accessories.add(new Product(10));
accessories.add(new Product(5));
const order = new Box();
order.add(new Product(20));
order.add(accessories);
order.price(); // 35

Follow the recursive work

The operation need not be a sum. A drawing group calls draw() on each child. A menu container can search its descendants. The common operation and combination rule define the design.

Put child management where it is honest

Map the roles

Role	In this example	Job
Component	PricedItem	Declares the operations that make sense for both simple and complex elements
Leaf	Product	A basic element with no children. Leaves usually do most of the real work, because they cannot delegate it.
Container (composite)	Box	Holds leaves or other containers, knows them only through the component interface, delegates to them, and combines their results
Client	the order total code	Works with every element through the component interface, so simple and complex elements look the same

Reach for it when your model is a tree

Composite is worth it only when the core of your model really is a tree.

• you need a tree-like object structure. Composite gives you two element types that share one interface: simple leaves and containers. Containers can hold leaves and other containers, so the structure nests to any depth.
• client code should treat simple and complex elements the same way. Every element shares the interface, so the client never needs to know the concrete class it is calling.

Implement it in six steps

Refactor existing code toward the pattern in this order:

1. Make sure the core model can be represented as a tree. Break it into simple elements and containers, and remember that a container must accept both.
2. Declare the component interface with methods that make sense for both simple and complex elements.
3. Create a leaf class for simple elements. A program can have several leaf classes.
4. Create a container class with an array field for its children. Type the array with the component interface so it can hold leaves and containers.
5. Implement the component methods in the container by delegating most of the work to its children.
6. Add methods to add and remove children. Put them on the container, or on the component interface. On the interface, leaves get empty methods, which breaks interface segregation, but clients can then treat every element the same, even when building the tree.

Name what it costs

You gain	You pay
Work with complex trees through polymorphism and recursion	A common interface is hard to define for classes whose behavior differs too much
New element types join the tree without changing existing code (open/closed)	Forcing one interface can overgeneralize it until it is hard to understand
One client operation for leaves and groups	Cycles, ownership, and depth need explicit rules

Do not confuse it with its neighbors

Pattern	How it relates
Decorator	Both rely on recursive composition, so their diagrams look alike. A decorator has one child and adds responsibilities to it. A composite has many children and combines their results. A decorator can extend one object inside a composite tree.
Builder	Use a builder to assemble complex composite trees, because its steps can run recursively.
Chain of Responsibility	A leaf can pass a request up through its parent containers to the root. The tree supplies the chain.
Iterator	Use an iterator to traverse a composite tree.
Visitor	Use a visitor to run an operation over an entire composite tree.
Flyweight	Shared leaf nodes can be flyweights to save memory.
Prototype	Designs heavy in Composite benefit from cloning a finished structure instead of rebuilding it.

Retrieve and apply

Draw a nested menu and state how find(label) combines child results. Continue to Decorator to stack behavior around a single component.