---
name: composite
description: This skill should be used when the user asks about "composite pattern", "when to use composite", "implement composite", "tree structure", "part-whole hierarchy", "nested objects", or mentions needing to treat individual and groups of objects uniformly.
version: 1.0.0
---

# Composite Pattern

## What Is It
The Composite pattern lets you compose objects into tree structures to represent part-whole hierarchies. It lets clients treat individual objects and compositions of objects uniformly through a common interface.

## When to Use
- **File systems** - Files and folders that can contain other files/folders
- **UI components** - Containers that hold other components (panels, groups)
- **Organization charts** - Employees, departments, divisions
- **Graphics systems** - Shapes that can contain other shapes
- **Menu systems** - Menu items and submenus
- **Document structure** - Sections containing paragraphs and other sections

## When NOT to Use
- **Flat structures** - No hierarchy means no need for composite
- **Different operations** - When leaf and composite operations are fundamentally different
- **Type safety critical** - Composite can make type checking harder
- **Performance sensitive** - Tree traversal can be expensive for deep structures

## How to Implement

### Implementation Steps
1. Define a component interface common to all objects in the tree
2. Create leaf classes that implement the component (no children)
3. Create composite classes that implement component and can contain children
4. Composite delegates operations to its children
5. Client uses component interface regardless of leaf vs composite

### TypeScript Implementation

```typescript
// Component interface
interface FileSystemNode {
  getName(): string;
  getSize(): number;
  print(indent?: string): void;
}

// Leaf
class File implements FileSystemNode {
  constructor(private name: string, private size: number) {}

  getName(): string { return this.name; }
  getSize(): number { return this.size; }
  print(indent = ''): void {
    console.log(`${indent}- ${this.name} (${this.size}KB)`);
  }
}

// Composite
class Folder implements FileSystemNode {
  private children: FileSystemNode[] = [];

  constructor(private name: string) {}

  add(node: FileSystemNode): void {
    this.children.push(node);
  }

  getName(): string { return this.name; }
  getSize(): number {
    return this.children.reduce((sum, child) => sum + child.getSize(), 0);
  }
  print(indent = ''): void {
    console.log(`${indent}+ ${this.name}/`);
    this.children.forEach(child => child.print(indent + '  '));
  }
}
```

## Code Examples
See `examples/` directory for runnable TypeScript implementations:
- `examples/composite.ts` - Basic implementation with file system
- `examples/composite-advanced.ts` - Real-world example with UI components

## Related Patterns
- **Visitor** - Apply operations over composite structures
- **Chain of Responsibility** - Often used with composites for event handling
- **Iterator** - Traverse composite structures
- **Decorator** - Often used with composites to add behavior