📘 Decorator Pattern: Dynamic Extension

🎯 Introduction

Welcome to this exciting tutorial on the Decorator Pattern! 🎉 In this guide, we’ll explore how to dynamically extend object functionality without modifying the original code.

You’ll discover how the Decorator Pattern can transform your TypeScript development experience. Whether you’re building web applications 🌐, game engines 🎮, or e-commerce platforms 🛒, understanding this pattern is essential for writing flexible, maintainable code.

By the end of this tutorial, you’ll feel confident using decorators to add superpowers to your objects! Let’s dive in! 🏊‍♂️

📚 Understanding Decorator Pattern

🤔 What is the Decorator Pattern?

The Decorator Pattern is like adding toppings to a pizza 🍕. Think of it as wrapping gifts 🎁 - each wrapper adds a new layer of functionality while preserving what’s inside.

In TypeScript terms, decorators allow you to add new behaviors to objects dynamically without altering their structure. This means you can:

✨ Add features on-the-fly
🚀 Combine multiple behaviors
🛡️ Keep original code untouched

💡 Why Use Decorator Pattern?

Here’s why developers love decorators:

Open/Closed Principle 🔒: Classes open for extension, closed for modification
Flexible Composition 💻: Mix and match behaviors like LEGO blocks
Runtime Configuration 📖: Add features based on user preferences
Single Responsibility 🔧: Each decorator does one thing well

Real-world example: Imagine building a coffee shop app ☕. With decorators, you can add milk, sugar, whipped cream, or caramel to any coffee without changing the base coffee class!

🔧 Basic Syntax and Usage

📝 Simple Example

Let’s start with a friendly example:

// 👋 Hello, Decorator Pattern!
interface Coffee {
  cost(): number;
  description(): string;
}

// 🎨 Base coffee implementation
class SimpleCoffee implements Coffee {
  cost(): number {
    return 2.00; // ☕ Basic coffee price
  }
  
  description(): string {
    return "Simple coffee";
  }
}

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

💡 Explanation: We define a base interface and a simple implementation. The abstract decorator will be our foundation for adding features!

🎯 Common Patterns

Here are patterns you’ll use daily:

// 🏗️ Pattern 1: Milk decorator
class MilkDecorator extends CoffeeDecorator {
  cost(): number {
    return this.coffee.cost() + 0.50; // 🥛 Add milk cost
  }
  
  description(): string {
    return `${this.coffee.description()} + Milk`;
  }
}

// 🎨 Pattern 2: Sugar decorator
class SugarDecorator extends CoffeeDecorator {
  cost(): number {
    return this.coffee.cost() + 0.25; // 🍬 Sweet addition
  }
  
  description(): string {
    return `${this.coffee.description()} + Sugar`;
  }
}

// 🔄 Pattern 3: Using decorators
const myCoffee = new SimpleCoffee();
const coffeeWithMilk = new MilkDecorator(myCoffee);
const sweetCoffee = new SugarDecorator(coffeeWithMilk);

console.log(`${sweetCoffee.description()} costs $${sweetCoffee.cost()}`);
// Output: Simple coffee + Milk + Sugar costs $2.75 ☕✨

💡 Practical Examples

🛒 Example 1: E-commerce Product Features

Let’s build something real:

// 🛍️ Define our product interface
interface Product {
  getPrice(): number;
  getDescription(): string;
  getFeatures(): string[];
}

// 📦 Base product class
class BasicProduct implements Product {
  constructor(
    private name: string,
    private basePrice: number,
    private emoji: string // Every product needs an emoji! 
  ) {}
  
  getPrice(): number {
    return this.basePrice;
  }
  
  getDescription(): string {
    return `${this.emoji} ${this.name}`;
  }
  
  getFeatures(): string[] {
    return ["📦 Standard packaging"];
  }
}

// 🎁 Gift wrap decorator
class GiftWrapDecorator implements Product {
  constructor(private product: Product) {}
  
  getPrice(): number {
    return this.product.getPrice() + 5.99; // 🎁 Gift wrap fee
  }
  
  getDescription(): string {
    return `${this.product.getDescription()} (Gift Wrapped)`;
  }
  
  getFeatures(): string[] {
    return [...this.product.getFeatures(), "🎁 Beautiful gift wrapping"];
  }
}

// ⚡ Express shipping decorator
class ExpressShippingDecorator implements Product {
  constructor(private product: Product) {}
  
  getPrice(): number {
    return this.product.getPrice() + 15.00; // 🚀 Express fee
  }
  
  getDescription(): string {
    return `${this.product.getDescription()} with Express Shipping`;
  }
  
  getFeatures(): string[] {
    return [...this.product.getFeatures(), "⚡ 24-hour delivery"];
  }
}

// 🎮 Let's use it!
const laptop = new BasicProduct("Gaming Laptop", 999.99, "💻");
const giftLaptop = new GiftWrapDecorator(laptop);
const rushOrder = new ExpressShippingDecorator(giftLaptop);

console.log(rushOrder.getDescription());
console.log(`Total: $${rushOrder.getPrice()}`);
console.log("Features:", rushOrder.getFeatures().join(", "));

🎯 Try it yourself: Add a warranty decorator and insurance decorator!

🎮 Example 2: Game Character Abilities

Let’s make it fun:

// 🏆 Character interface
interface GameCharacter {
  attack(): number;
  defend(): number;
  getAbilities(): string[];
  getStats(): string;
}

// 🦸 Base character
class BaseCharacter implements GameCharacter {
  constructor(
    private name: string,
    private baseAttack: number,
    private baseDefense: number
  ) {}
  
  attack(): number {
    return this.baseAttack;
  }
  
  defend(): number {
    return this.baseDefense;
  }
  
  getAbilities(): string[] {
    return ["⚔️ Basic Attack"];
  }
  
  getStats(): string {
    return `${this.name} - ATK: ${this.attack()} | DEF: ${this.defend()}`;
  }
}

// 🔥 Fire enchantment decorator
class FireEnchantment implements GameCharacter {
  constructor(private character: GameCharacter) {}
  
  attack(): number {
    return this.character.attack() + 15; // 🔥 Fire damage bonus
  }
  
  defend(): number {
    return this.character.defend();
  }
  
  getAbilities(): string[] {
    return [...this.character.getAbilities(), "🔥 Fire Strike"];
  }
  
  getStats(): string {
    return `${this.character.getStats()} 🔥`;
  }
}

// 🛡️ Shield decorator
class ShieldDecorator implements GameCharacter {
  constructor(private character: GameCharacter) {}
  
  attack(): number {
    return this.character.attack();
  }
  
  defend(): number {
    return this.character.defend() + 20; // 🛡️ Shield bonus
  }
  
  getAbilities(): string[] {
    return [...this.character.getAbilities(), "🛡️ Shield Block"];
  }
  
  getStats(): string {
    return `${this.character.getStats()} 🛡️`;
  }
}

// 🎮 Create a powerful character!
const hero = new BaseCharacter("Knight", 50, 30);
const fireKnight = new FireEnchantment(hero);
const shieldedFireKnight = new ShieldDecorator(fireKnight);

console.log(shieldedFireKnight.getStats());
console.log("Abilities:", shieldedFireKnight.getAbilities().join(", "));

🚀 Advanced Concepts

🧙‍♂️ Advanced Topic 1: TypeScript Decorators

When you’re ready to level up, try TypeScript’s built-in decorators:

// 🎯 Method decorator
const LogExecution = (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
  const originalMethod = descriptor.value;
  
  descriptor.value = function(...args: any[]) {
    console.log(`⚡ Executing ${propertyKey} with args:`, args);
    const result = originalMethod.apply(this, args);
    console.log(`✨ Result:`, result);
    return result;
  };
  
  return descriptor;
};

// 🪄 Using the decorator
class MagicCalculator {
  @LogExecution
  multiply(a: number, b: number): number {
    return a * b;
  }
}

const calc = new MagicCalculator();
calc.multiply(5, 3); // ⚡ Logs execution automatically!

🏗️ Advanced Topic 2: Decorator Factory

For the brave developers:

// 🚀 Decorator factory with configuration
const PowerUp = (powerLevel: number, emoji: string) => {
  return (constructor: Function) => {
    constructor.prototype.powerLevel = powerLevel;
    constructor.prototype.powerEmoji = emoji;
    constructor.prototype.showPower = function() {
      return `${this.powerEmoji} Power Level: ${this.powerLevel}`;
    };
  };
};

// 💪 Apply decorators with different configs
@PowerUp(9000, "🔥")
class SuperSaiyan {
  name = "Goku";
}

@PowerUp(100, "⚡")
class Pikachu {
  name = "Pikachu";
}

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Decorator Order Matters

// ❌ Wrong way - order confusion!
const coffee1 = new MilkDecorator(new SugarDecorator(new SimpleCoffee()));
const coffee2 = new SugarDecorator(new MilkDecorator(new SimpleCoffee()));
// 💥 Different results if decorators have side effects!

// ✅ Correct way - be intentional about order!
class OrderedDecorator {
  private decorators: CoffeeDecorator[] = [];
  
  add(decorator: typeof CoffeeDecorator, coffee: Coffee): Coffee {
    // 🎯 Clear, trackable decoration order
    return new decorator(coffee);
  }
}

🤯 Pitfall 2: Infinite Decoration

// ❌ Dangerous - might create infinite loop!
const addAllTheThings = (product: Product): Product => {
  return new GiftWrapDecorator(addAllTheThings(product));
  // 💥 Stack overflow!
}

// ✅ Safe - add validation!
class SafeDecorator {
  private static maxDecorations = 5;
  private decorationCount = 0;
  
  decorate(product: Product): Product {
    if (this.decorationCount >= SafeDecorator.maxDecorations) {
      console.log("⚠️ Maximum decorations reached!");
      return product;
    }
    this.decorationCount++;
    return new GiftWrapDecorator(product); // ✅ Safe now!
  }
}

🛠️ Best Practices

🎯 Keep Decorators Focused: Each decorator should add one specific feature
📝 Document Decoration Order: Make it clear which order decorators should be applied
🛡️ Validate Inputs: Check that the wrapped object is valid
🎨 Use Meaningful Names: PremiumShippingDecorator not Decorator1
✨ Consider Performance: Too many decorators can impact performance

🧪 Hands-On Exercise

🎯 Challenge: Build a Pizza Order System

Create a type-safe pizza ordering system with decorators:

📋 Requirements:

✅ Base pizza with size options (small, medium, large)
🏷️ Topping decorators (cheese, pepperoni, mushrooms, etc.)
👤 Special request decorator for custom instructions
📅 Delivery time decorator
🎨 Each topping needs an emoji!

🚀 Bonus Points:

Add pricing based on size
Implement a maximum toppings limit
Create a receipt generator

💡 Solution

🔍 Click to see solution

// 🎯 Our type-safe pizza system!
interface Pizza {
  getCost(): number;
  getDescription(): string;
  getToppings(): string[];
  getSize(): "small" | "medium" | "large";
}

// 🍕 Base pizza
class BasePizza implements Pizza {
  constructor(private size: "small" | "medium" | "large") {}
  
  getCost(): number {
    const prices = { small: 8, medium: 12, large: 16 };
    return prices[this.size];
  }
  
  getDescription(): string {
    return `${this.size} pizza`;
  }
  
  getToppings(): string[] {
    return ["🍅 Tomato sauce", "🧀 Mozzarella"];
  }
  
  getSize(): "small" | "medium" | "large" {
    return this.size;
  }
}

// 🍕 Abstract topping decorator
abstract class ToppingDecorator implements Pizza {
  constructor(protected pizza: Pizza) {}
  
  abstract getCost(): number;
  abstract getDescription(): string;
  abstract getToppings(): string[];
  
  getSize(): "small" | "medium" | "large" {
    return this.pizza.getSize();
  }
}

// 🥓 Pepperoni decorator
class PepperoniDecorator extends ToppingDecorator {
  getCost(): number {
    return this.pizza.getCost() + 2.50;
  }
  
  getDescription(): string {
    return `${this.pizza.getDescription()} + Pepperoni`;
  }
  
  getToppings(): string[] {
    return [...this.pizza.getToppings(), "🥓 Pepperoni"];
  }
}

// 🍄 Mushroom decorator
class MushroomDecorator extends ToppingDecorator {
  getCost(): number {
    return this.pizza.getCost() + 1.50;
  }
  
  getDescription(): string {
    return `${this.pizza.getDescription()} + Mushrooms`;
  }
  
  getToppings(): string[] {
    return [...this.pizza.getToppings(), "🍄 Mushrooms"];
  }
}

// 📝 Special request decorator
class SpecialRequestDecorator extends ToppingDecorator {
  constructor(pizza: Pizza, private request: string) {
    super(pizza);
  }
  
  getCost(): number {
    return this.pizza.getCost(); // 🎁 No extra charge!
  }
  
  getDescription(): string {
    return `${this.pizza.getDescription()} (${this.request})`;
  }
  
  getToppings(): string[] {
    return [...this.pizza.getToppings(), `📝 Special: ${this.request}`];
  }
}

// 🚚 Delivery decorator
class DeliveryDecorator implements Pizza {
  constructor(
    private pizza: Pizza,
    private deliveryTime: number // Minutes
  ) {}
  
  getCost(): number {
    const deliveryFee = this.deliveryTime <= 30 ? 5 : 3;
    return this.pizza.getCost() + deliveryFee;
  }
  
  getDescription(): string {
    return `${this.pizza.getDescription()} 🚚 (${this.deliveryTime}min delivery)`;
  }
  
  getToppings(): string[] {
    return this.pizza.getToppings();
  }
  
  getSize(): "small" | "medium" | "large" {
    return this.pizza.getSize();
  }
}

// 🎮 Test it out!
const myPizza = new BasePizza("large");
const pepperoniPizza = new PepperoniDecorator(myPizza);
const mushroomPepperoniPizza = new MushroomDecorator(pepperoniPizza);
const specialPizza = new SpecialRequestDecorator(
  mushroomPepperoniPizza,
  "Extra crispy crust"
);
const deliveredPizza = new DeliveryDecorator(specialPizza, 25);

console.log("🍕 Order Summary:");
console.log(`Description: ${deliveredPizza.getDescription()}`);
console.log(`Toppings: ${deliveredPizza.getToppings().join(", ")}`);
console.log(`Total Cost: $${deliveredPizza.getCost().toFixed(2)}`);

🎓 Key Takeaways

You’ve learned so much! Here’s what you can now do:

✅ Create decorators with confidence 💪
✅ Avoid common mistakes like infinite loops and order issues 🛡️
✅ Apply decorators in real projects 🎯
✅ Debug decorator chains like a pro 🐛
✅ Build flexible systems with TypeScript! 🚀

Remember: The Decorator Pattern is your friend for adding features without changing existing code! 🤝

🤝 Next Steps

Congratulations! 🎉 You’ve mastered the Decorator Pattern!

Here’s what to do next:

💻 Practice with the pizza ordering exercise above
🏗️ Build a notification system with email, SMS, and push decorators
📚 Move on to our next tutorial: Abstract Factory Pattern
🌟 Share your decorated creations with others!

Remember: Every design pattern expert was once a beginner. Keep coding, keep learning, and most importantly, have fun! 🚀

Happy coding! 🎉🚀✨

Prerequisites

What you'll learn