---
name: decorator
description: This skill should be used when the user asks about "decorator pattern", "when to use decorator", "implement decorator", "wrapper pattern", "add behavior dynamically", "extend object functionality", or mentions needing to add responsibilities to objects at runtime.
version: 1.0.0
---

# Decorator Pattern

## What Is It
The Decorator pattern attaches additional responsibilities to an object dynamically. It provides a flexible alternative to subclassing for extending functionality by wrapping objects with decorator classes that add new behavior.

## When to Use
- **Add responsibilities dynamically** - At runtime, not compile time
- **Avoid class explosion** - Too many subclasses for every combination of features
- **UI components** - Adding scrollbars, borders, themes to widgets
- **Logging and monitoring** - Wrap objects to add logging transparently
- **Caching** - Wrap expensive operations with caching layer
- **Validation** - Add validation layers to input processing
- **Compression/Encryption** - Wrap streams or data with transformations

## When NOT to Use
- **Simple functionality** - Don't over-engineer for single features
- **Performance critical** - Decorator adds method call overhead
- **Deeply nested decorators** - Can become hard to debug
- **When subclassing is simpler** - If behavior is static, inheritance may be clearer

## How to Implement

### Implementation Steps
1. Define a component interface that both core objects and decorators will implement
2. Create concrete components implementing the interface
3. Create a base decorator class that wraps a component and delegates operations
4. Create concrete decorators that extend base decorator and add behavior
5. Decorators call parent operation and add their own before/after logic

### TypeScript Implementation

```typescript
// Component interface
interface Coffee {
  cost(): number;
  description(): string;
}

// Concrete component
class SimpleCoffee implements Coffee {
  cost() { return 5; }
  description() { return 'Simple coffee'; }
}

// Base decorator
abstract class CoffeeDecorator implements Coffee {
  constructor(protected coffee: Coffee) {}
  abstract cost(): number;
  abstract description(): string;
}

// Concrete decorators
class MilkDecorator extends CoffeeDecorator {
  cost() { return this.coffee.cost() + 2; }
  description() { return `${this.coffee.description()}, with milk`; }
}

class WhipDecorator extends CoffeeDecorator {
  cost() { return this.coffee.cost() + 3; }
  description() { return `${this.coffee.description()}, with whip`; }
}

// Usage
let coffee: Coffee = new SimpleCoffee();
coffee = new MilkDecorator(coffee);
coffee = new WhipDecorator(coffee);
console.log(coffee.description()); // Simple coffee, with milk, with whip
```

## Code Examples
See `examples/` directory for runnable TypeScript implementations:
- `examples/decorator.ts` - Basic implementation with coffee shop
- `examples/decorator-advanced.ts` - Real-world example with HTTP middleware

## Related Patterns
- **Adapter** - Adapter changes interface; Decorator adds behavior
- **Composite** - Decorator is a degenerate composite with one component
- **Strategy** - Strategy changes object's guts; Decorator changes skin
- **Chain of Responsibility** - Similar chaining but decorators wrap, not pass along