📘 Observer Pattern: Event Subscription

🎯 Introduction

Ever wondered how YouTube knows to update your notification bell when your favorite creator uploads? Or how your weather app updates automatically when conditions change? That’s the magic of the Observer Pattern in action! 🌟

The Observer Pattern is like having a group chat where everyone gets notified when someone posts something important. It’s one of the most useful design patterns in TypeScript, and today you’re going to master it! 💪

In this tutorial, you’ll learn:

• What the Observer Pattern is and why it’s so powerful 🔮
• How to implement it with TypeScript’s type safety 🛡️
• Real-world examples that’ll make you go “Aha!” 💡
• Best practices to avoid common pitfalls 🎯

Ready to become an event subscription wizard? Let’s dive in! 🏊‍♂️

📚 Understanding Observer Pattern

The Observer Pattern is like subscribing to your favorite newsletter 📧. When new content is published (an event occurs), all subscribers (observers) automatically receive it without having to constantly check for updates!

Real-World Analogy 🌍

Think of it like a pizza delivery tracking system 🍕:

• The Pizza Tracker is the Subject (what you’re observing)
• You and other customers are the Observers (subscribers)
• When the pizza status changes, everyone gets notified! 📱

Benefits of Observer Pattern 🎁

• Loose Coupling: Subjects and observers don’t need to know each other’s details 🔌
• Dynamic Relationships: Add or remove observers at runtime 🔄
• Event-Driven Architecture: Perfect for reactive applications ⚡
• Scalability: Easy to add new observer types without changing existing code 📈

🔧 Basic Syntax and Usage

Let’s start with a simple Observer Pattern implementation in TypeScript:

// 📝 Define the Observer interface
interface Observer<T> {
  update(data: T): void;
}

// 📢 Define the Subject interface
interface Subject<T> {
  attach(observer: Observer<T>): void;
  detach(observer: Observer<T>): void;
  notify(data: T): void;
}

// 🎯 Concrete Subject implementation
class EventEmitter<T> implements Subject<T> {
  private observers: Observer<T>[] = [];

  // ➕ Add an observer
  attach(observer: Observer<T>): void {
    console.log('👋 New observer joined!');
    this.observers.push(observer);
  }

  // ➖ Remove an observer
  detach(observer: Observer<T>): void {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
      console.log('👋 Observer left!');
    }
  }

  // 📢 Notify all observers
  notify(data: T): void {
    console.log('📣 Broadcasting to all observers...');
    this.observers.forEach(observer => observer.update(data));
  }
}

// 👀 Concrete Observer
class NewsSubscriber implements Observer<string> {
  constructor(private name: string) {}

  update(news: string): void {
    console.log(`📰 ${this.name} received: ${news}`);
  }
}

// 🚀 Let's see it in action!
const newsChannel = new EventEmitter<string>();

const alice = new NewsSubscriber('Alice');
const bob = new NewsSubscriber('Bob');

newsChannel.attach(alice);
newsChannel.attach(bob);

newsChannel.notify('Breaking: TypeScript 5.0 Released! 🎉');
// Output:
// 👋 New observer joined!
// 👋 New observer joined!
// 📣 Broadcasting to all observers...
// 📰 Alice received: Breaking: TypeScript 5.0 Released! 🎉
// 📰 Bob received: Breaking: TypeScript 5.0 Released! 🎉

💡 Practical Examples

Example 1: Stock Price Tracker 📈

Let’s build a stock price monitoring system where investors get notified of price changes:

// 💰 Stock price update interface
interface StockUpdate {
  symbol: string;
  price: number;
  change: number;
  timestamp: Date;
}

// 📊 Stock ticker subject
class StockTicker implements Subject<StockUpdate> {
  private observers: Observer<StockUpdate>[] = [];
  private stocks: Map<string, number> = new Map();

  attach(observer: Observer<StockUpdate>): void {
    this.observers.push(observer);
    console.log('📈 New investor subscribed!');
  }

  detach(observer: Observer<StockUpdate>): void {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  }

  notify(data: StockUpdate): void {
    this.observers.forEach(observer => observer.update(data));
  }

  // 💹 Update stock price
  updateStock(symbol: string, newPrice: number): void {
    const oldPrice = this.stocks.get(symbol) || newPrice;
    this.stocks.set(symbol, newPrice);
    
    const change = ((newPrice - oldPrice) / oldPrice) * 100;
    
    const update: StockUpdate = {
      symbol,
      price: newPrice,
      change,
      timestamp: new Date()
    };

    console.log(`📊 ${symbol}: $${newPrice} (${change > 0 ? '+' : ''}${change.toFixed(2)}%)`);
    this.notify(update);
  }
}

// 💼 Different types of investors
class DayTrader implements Observer<StockUpdate> {
  constructor(private name: string) {}

  update(data: StockUpdate): void {
    if (Math.abs(data.change) > 2) {
      console.log(`🏃 ${this.name}: Quick trade on ${data.symbol}! Big move: ${data.change.toFixed(2)}%`);
    }
  }
}

class LongTermInvestor implements Observer<StockUpdate> {
  constructor(private name: string) {}

  update(data: StockUpdate): void {
    if (data.change < -10) {
      console.log(`💎 ${this.name}: Buying the dip on ${data.symbol}! Down ${data.change.toFixed(2)}%`);
    }
  }
}

// 🎮 Let's simulate the market!
const nasdaq = new StockTicker();

const dayTrader = new DayTrader('FastMoney Mike');
const investor = new LongTermInvestor('Patient Patricia');

nasdaq.attach(dayTrader);
nasdaq.attach(investor);

// 📈 Market simulation
nasdaq.updateStock('TSLA', 250.00);
nasdaq.updateStock('TSLA', 260.00);  // +4% triggers day trader
nasdaq.updateStock('AAPL', 180.00);
nasdaq.updateStock('AAPL', 160.00);  // -11% triggers long-term investor

Example 2: Game Achievement System 🎮

Create an achievement notification system for a game:

// 🏆 Achievement data
interface Achievement {
  id: string;
  name: string;
  description: string;
  points: number;
  icon: string;
}

// 🎮 Player progress data
interface ProgressUpdate {
  playerId: string;
  metric: string;
  value: number;
}

// 🏅 Achievement manager
class AchievementManager implements Subject<Achievement> {
  private observers: Observer<Achievement>[] = [];
  private playerProgress: Map<string, Map<string, number>> = new Map();
  
  private achievements: Achievement[] = [
    { id: 'first_kill', name: 'First Blood', description: 'Defeat your first enemy', points: 10, icon: '⚔️' },
    { id: 'speed_demon', name: 'Speed Demon', description: 'Complete level in under 60 seconds', points: 25, icon: '⚡' },
    { id: 'collector', name: 'Collector', description: 'Collect 100 coins', points: 50, icon: '💰' }
  ];

  attach(observer: Observer<Achievement>): void {
    this.observers.push(observer);
  }

  detach(observer: Observer<Achievement>): void {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  }

  notify(achievement: Achievement): void {
    this.observers.forEach(observer => observer.update(achievement));
  }

  // 📊 Update player progress
  updateProgress(update: ProgressUpdate): void {
    if (!this.playerProgress.has(update.playerId)) {
      this.playerProgress.set(update.playerId, new Map());
    }
    
    const progress = this.playerProgress.get(update.playerId)!;
    progress.set(update.metric, update.value);

    // 🎯 Check for achievements
    this.checkAchievements(update.playerId, update.metric, update.value);
  }

  private checkAchievements(playerId: string, metric: string, value: number): void {
    // 🏆 Check each achievement condition
    if (metric === 'enemies_defeated' && value === 1) {
      this.unlockAchievement('first_kill');
    } else if (metric === 'level_time' && value < 60) {
      this.unlockAchievement('speed_demon');
    } else if (metric === 'coins_collected' && value >= 100) {
      this.unlockAchievement('collector');
    }
  }

  private unlockAchievement(achievementId: string): void {
    const achievement = this.achievements.find(a => a.id === achievementId);
    if (achievement) {
      console.log(`🎊 Achievement Unlocked: ${achievement.icon} ${achievement.name}!`);
      this.notify(achievement);
    }
  }
}

// 📱 UI notification system
class NotificationUI implements Observer<Achievement> {
  update(achievement: Achievement): void {
    console.log(`🎯 UI Popup: ${achievement.icon} ${achievement.name} - ${achievement.points} points!`);
  }
}

// 📊 Stats tracker
class PlayerStats implements Observer<Achievement> {
  private totalPoints = 0;

  update(achievement: Achievement): void {
    this.totalPoints += achievement.points;
    console.log(`📈 Stats Updated: Total points = ${this.totalPoints}`);
  }
}

// 🎮 Game in action!
const gameAchievements = new AchievementManager();
const ui = new NotificationUI();
const stats = new PlayerStats();

gameAchievements.attach(ui);
gameAchievements.attach(stats);

// 🎯 Player actions
gameAchievements.updateProgress({ playerId: 'player1', metric: 'enemies_defeated', value: 1 });
gameAchievements.updateProgress({ playerId: 'player1', metric: 'level_time', value: 45 });
gameAchievements.updateProgress({ playerId: 'player1', metric: 'coins_collected', value: 100 });

Example 3: Shopping Cart with Real-time Updates 🛒

// 🛍️ Shopping cart events
type CartEvent = 'item_added' | 'item_removed' | 'cart_cleared';

interface CartUpdate {
  event: CartEvent;
  item?: Product;
  totalItems: number;
  totalPrice: number;
}

interface Product {
  id: string;
  name: string;
  price: number;
  emoji: string;
}

// 🛒 Shopping cart subject
class ShoppingCart implements Subject<CartUpdate> {
  private observers: Observer<CartUpdate>[] = [];
  private items: Map<string, { product: Product; quantity: number }> = new Map();

  attach(observer: Observer<CartUpdate>): void {
    this.observers.push(observer);
  }

  detach(observer: Observer<CartUpdate>): void {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  }

  notify(update: CartUpdate): void {
    this.observers.forEach(observer => observer.update(update));
  }

  // ➕ Add item to cart
  addItem(product: Product, quantity: number = 1): void {
    const existing = this.items.get(product.id);
    if (existing) {
      existing.quantity += quantity;
    } else {
      this.items.set(product.id, { product, quantity });
    }

    console.log(`${product.emoji} Added ${product.name} to cart!`);
    this.notify({
      event: 'item_added',
      item: product,
      totalItems: this.getTotalItems(),
      totalPrice: this.getTotalPrice()
    });
  }

  // ➖ Remove item from cart
  removeItem(productId: string): void {
    const item = this.items.get(productId);
    if (item) {
      this.items.delete(productId);
      console.log(`${item.product.emoji} Removed ${item.product.name} from cart!`);
      this.notify({
        event: 'item_removed',
        item: item.product,
        totalItems: this.getTotalItems(),
        totalPrice: this.getTotalPrice()
      });
    }
  }

  private getTotalItems(): number {
    return Array.from(this.items.values()).reduce((sum, item) => sum + item.quantity, 0);
  }

  private getTotalPrice(): number {
    return Array.from(this.items.values()).reduce(
      (sum, item) => sum + (item.product.price * item.quantity), 
      0
    );
  }
}

// 💰 Price display observer
class PriceDisplay implements Observer<CartUpdate> {
  update(data: CartUpdate): void {
    console.log(`💰 Total: $${data.totalPrice.toFixed(2)} (${data.totalItems} items)`);
  }
}

// 📧 Email notification observer
class EmailNotifier implements Observer<CartUpdate> {
  update(data: CartUpdate): void {
    if (data.event === 'item_added' && data.totalPrice > 100) {
      console.log(`📧 Email: You qualify for free shipping! 🎉`);
    }
  }
}

// 📊 Analytics observer
class Analytics implements Observer<CartUpdate> {
  private events: CartEvent[] = [];

  update(data: CartUpdate): void {
    this.events.push(data.event);
    console.log(`📊 Analytics: ${data.event} tracked (Total events: ${this.events.length})`);
  }
}

// 🛍️ Shopping time!
const cart = new ShoppingCart();
const priceDisplay = new PriceDisplay();
const emailer = new EmailNotifier();
const analytics = new Analytics();

cart.attach(priceDisplay);
cart.attach(emailer);
cart.attach(analytics);

// 🛒 Add some products
const products: Product[] = [
  { id: '1', name: 'Gaming Keyboard', price: 79.99, emoji: '⌨️' },
  { id: '2', name: 'Gaming Mouse', price: 49.99, emoji: '🖱️' },
  { id: '3', name: 'Monitor', price: 299.99, emoji: '🖥️' }
];

cart.addItem(products[0]);
cart.addItem(products[1]);
cart.addItem(products[2]); // Triggers free shipping email!

🚀 Advanced Concepts

Type-Safe Event Emitter with Generics 🧬

Let’s create a more advanced, type-safe event system:

// 🎯 Event map for strong typing
interface GameEvents {
  'player:levelUp': { playerId: string; newLevel: number; };
  'player:scoreUpdate': { playerId: string; score: number; highScore: boolean; };
  'game:over': { winner: string; finalScore: number; };
}

// 🔥 Advanced type-safe event emitter
class TypedEventEmitter<TEvents extends Record<string, any>> {
  private listeners: {
    [K in keyof TEvents]?: Array<(data: TEvents[K]) => void>;
  } = {};

  // 👂 Type-safe event listener
  on<K extends keyof TEvents>(event: K, listener: (data: TEvents[K]) => void): () => void {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    
    this.listeners[event]!.push(listener);
    
    // 🔌 Return unsubscribe function
    return () => this.off(event, listener);
  }

  // 🔇 Remove listener
  off<K extends keyof TEvents>(event: K, listener: (data: TEvents[K]) => void): void {
    const listeners = this.listeners[event];
    if (listeners) {
      const index = listeners.indexOf(listener);
      if (index > -1) {
        listeners.splice(index, 1);
      }
    }
  }

  // 📢 Emit type-safe event
  emit<K extends keyof TEvents>(event: K, data: TEvents[K]): void {
    const listeners = this.listeners[event];
    if (listeners) {
      listeners.forEach(listener => listener(data));
    }
  }

  // 🎯 Once listener (auto-unsubscribe after first call)
  once<K extends keyof TEvents>(event: K, listener: (data: TEvents[K]) => void): void {
    const unsubscribe = this.on(event, (data) => {
      listener(data);
      unsubscribe();
    });
  }
}

// 🎮 Game system using typed events
class GameSystem {
  private events = new TypedEventEmitter<GameEvents>();
  
  // Expose event methods
  on = this.events.on.bind(this.events);
  emit = this.events.emit.bind(this.events);
  
  // 🎯 Game actions
  levelUpPlayer(playerId: string, newLevel: number): void {
    console.log(`⬆️ Player ${playerId} reached level ${newLevel}!`);
    this.emit('player:levelUp', { playerId, newLevel });
  }
  
  updateScore(playerId: string, score: number, highScore: boolean): void {
    console.log(`📊 Player ${playerId} score: ${score}${highScore ? ' 🏆 NEW HIGH SCORE!' : ''}`);
    this.emit('player:scoreUpdate', { playerId, score, highScore });
  }
  
  endGame(winner: string, finalScore: number): void {
    console.log(`🏁 Game Over! Winner: ${winner} with ${finalScore} points!`);
    this.emit('game:over', { winner, finalScore });
  }
}

// 🎯 Usage with full type safety!
const game = new GameSystem();

// ✅ TypeScript knows the exact shape of each event
game.on('player:levelUp', ({ playerId, newLevel }) => {
  console.log(`🎊 Celebration animation for ${playerId} reaching level ${newLevel}!`);
});

game.on('player:scoreUpdate', ({ score, highScore }) => {
  if (highScore) {
    console.log(`🎆 Fireworks! New high score: ${score}!`);
  }
});

// 🎮 Simulate game
game.levelUpPlayer('Alice', 5);
game.updateScore('Alice', 5000, true);
game.endGame('Alice', 5000);

Async Observer Pattern 🔄

Handle asynchronous operations in observers:

// 🔄 Async observer interface
interface AsyncObserver<T> {
  update(data: T): Promise<void>;
}

// 📡 Async subject
class AsyncEventEmitter<T> implements Subject<AsyncObserver<T>> {
  private observers: AsyncObserver<T>[] = [];

  attach(observer: AsyncObserver<T>): void {
    this.observers.push(observer);
  }

  detach(observer: AsyncObserver<T>): void {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  }

  // 🚀 Notify all observers asynchronously
  async notify(data: T): Promise<void> {
    console.log('📡 Broadcasting async event...');
    
    // Option 1: Parallel execution
    await Promise.all(
      this.observers.map(observer => observer.update(data))
    );
    
    // Option 2: Sequential execution (uncomment if needed)
    // for (const observer of this.observers) {
    //   await observer.update(data);
    // }
  }
}

// 💾 Database logger (async)
class DatabaseLogger implements AsyncObserver<string> {
  async update(message: string): Promise<void> {
    console.log('💾 Saving to database...');
    // Simulate async database operation
    await new Promise(resolve => setTimeout(resolve, 100));
    console.log(`✅ Logged: "${message}" to database`);
  }
}

// 📧 Email sender (async)
class EmailSender implements AsyncObserver<string> {
  async update(message: string): Promise<void> {
    console.log('📧 Sending email...');
    // Simulate async email sending
    await new Promise(resolve => setTimeout(resolve, 200));
    console.log(`✅ Email sent: "${message}"`);
  }
}

// 🚀 Test async observers
async function testAsyncObservers() {
  const notifier = new AsyncEventEmitter<string>();
  
  notifier.attach(new DatabaseLogger());
  notifier.attach(new EmailSender());
  
  await notifier.notify('Important system event occurred! 🚨');
  console.log('🎯 All observers notified!');
}

// Run the test
testAsyncObservers();

⚠️ Common Pitfalls and Solutions

❌ Wrong: Memory Leaks from Forgotten Observers

// ❌ BAD: Observers never get removed
class LeakyComponent {
  private eventEmitter: EventEmitter<string>;
  
  constructor(emitter: EventEmitter<string>) {
    this.eventEmitter = emitter;
    // Observer attached but never detached!
    this.eventEmitter.attach({
      update: (data) => console.log(data)
    });
  }
  
  // No cleanup method! 😱
}

✅ Correct: Proper Observer Cleanup

// ✅ GOOD: Always clean up observers
class CleanComponent {
  private eventEmitter: EventEmitter<string>;
  private observer: Observer<string>;
  
  constructor(emitter: EventEmitter<string>) {
    this.eventEmitter = emitter;
    this.observer = {
      update: (data) => console.log(data)
    };
    this.eventEmitter.attach(this.observer);
  }
  
  // 🧹 Cleanup method
  destroy(): void {
    this.eventEmitter.detach(this.observer);
    console.log('🧹 Observer cleaned up!');
  }
}

❌ Wrong: Modifying Observer List During Notification

// ❌ BAD: Causes unexpected behavior
class BadSubject<T> implements Subject<T> {
  private observers: Observer<T>[] = [];
  
  notify(data: T): void {
    // ❌ Direct iteration while list might change
    this.observers.forEach(observer => {
      observer.update(data);
      // What if update() calls detach()? 💥
    });
  }
}

✅ Correct: Safe Notification with Copy

// ✅ GOOD: Iterate over a copy
class SafeSubject<T> implements Subject<T> {
  private observers: Observer<T>[] = [];
  
  notify(data: T): void {
    // ✅ Create a copy to iterate safely
    const observersCopy = [...this.observers];
    observersCopy.forEach(observer => {
      observer.update(data);
    });
  }
}

❌ Wrong: Tight Coupling with Concrete Types

// ❌ BAD: Tightly coupled to specific implementation
class NewsChannel {
  private subscribers: EmailSubscriber[] = []; // ❌ Too specific!
  
  addSubscriber(subscriber: EmailSubscriber): void {
    this.subscribers.push(subscriber);
  }
}

✅ Correct: Program to Interfaces

// ✅ GOOD: Loosely coupled with interfaces
class NewsChannel {
  private subscribers: Observer<string>[] = []; // ✅ Uses interface!
  
  addSubscriber(subscriber: Observer<string>): void {
    this.subscribers.push(subscriber);
  }
}

🛠️ Best Practices

1. 🔐 Use WeakMap for Private Observer Storage

   const observersMap = new WeakMap<Subject<any>, Observer<any>[]>();

2. 🎯 Implement Unsubscribe Tokens

   const unsubscribe = emitter.on('event', handler);
   // Later: unsubscribe();

3. 📋 Use Event Types for Better Organization

   type EventMap = { click: MouseEvent; change: string; };

4. 🛡️ Add Error Handling in Observers

   try {
     observer.update(data);
   } catch (error) {
     console.error('Observer error:', error);
   }

5. 📊 Consider Using Existing Libraries

   • RxJS for complex reactive programming
   • Node.js EventEmitter for simple cases
   • MobX for state management with observers

🧪 Hands-On Exercise

Ready to put your skills to the test? Let’s build a Chat Room system! 💬

Requirements:

1. Create a ChatRoom class that acts as the subject
2. Create different types of observers:
   • User - receives and displays messages
   • MessageLogger - logs all messages
   • ProfanityFilter - alerts on inappropriate content
3. Messages should include: sender, content, timestamp
4. Users should be able to join/leave the chat
5. Bonus: Add private messaging between users! 🤫

// 💬 Message interface
interface ChatMessage {
  id: string;
  sender: string;
  content: string;
  timestamp: Date;
  isPrivate: boolean;
  recipient?: string;
}

// 🏠 Chat room subject
class ChatRoom implements Subject<ChatMessage> {
  private observers: Map<string, Observer<ChatMessage>> = new Map();
  private messageHistory: ChatMessage[] = [];
  private messageId = 0;

  // 👋 User joins chat
  join(username: string, observer: Observer<ChatMessage>): void {
    this.observers.set(username, observer);
    console.log(`👋 ${username} joined the chat!`);
    
    // Send join notification
    this.broadcast('System', `${username} has entered the chat! 🎉`);
  }

  // 👋 User leaves chat
  leave(username: string): void {
    if (this.observers.delete(username)) {
      console.log(`👋 ${username} left the chat!`);
      this.broadcast('System', `${username} has left the chat 😢`);
    }
  }

  // 📢 Public message
  sendMessage(sender: string, content: string): void {
    const message: ChatMessage = {
      id: `msg-${++this.messageId}`,
      sender,
      content,
      timestamp: new Date(),
      isPrivate: false
    };
    
    this.messageHistory.push(message);
    this.notify(message);
  }

  // 🤫 Private message
  sendPrivateMessage(sender: string, recipient: string, content: string): void {
    const message: ChatMessage = {
      id: `msg-${++this.messageId}`,
      sender,
      content,
      timestamp: new Date(),
      isPrivate: true,
      recipient
    };
    
    this.messageHistory.push(message);
    
    // Only notify sender and recipient
    const senderObserver = this.observers.get(sender);
    const recipientObserver = this.observers.get(recipient);
    
    if (senderObserver) senderObserver.update(message);
    if (recipientObserver) recipientObserver.update(message);
    
    console.log(`🤫 Private message from ${sender} to ${recipient}`);
  }

  // 📣 System broadcast
  private broadcast(sender: string, content: string): void {
    const message: ChatMessage = {
      id: `msg-${++this.messageId}`,
      sender,
      content,
      timestamp: new Date(),
      isPrivate: false
    };
    
    this.notify(message);
  }

  // Required Subject methods
  attach(observer: Observer<ChatMessage>): void {
    // Not used directly - use join() instead
  }

  detach(observer: Observer<ChatMessage>): void {
    // Not used directly - use leave() instead
  }

  notify(message: ChatMessage): void {
    if (message.isPrivate) return; // Private messages handled separately
    
    this.observers.forEach((observer, username) => {
      observer.update(message);
    });
  }
}

// 👤 Chat user
class User implements Observer<ChatMessage> {
  constructor(private username: string) {}

  update(message: ChatMessage): void {
    const time = message.timestamp.toLocaleTimeString();
    
    if (message.isPrivate) {
      if (message.sender === this.username) {
        console.log(`📤 [${time}] You → ${message.recipient}: ${message.content}`);
      } else {
        console.log(`📨 [${time}] ${message.sender} → You (private): ${message.content}`);
      }
    } else {
      const prefix = message.sender === 'System' ? '📢' : '💬';
      console.log(`${prefix} [${time}] ${message.sender}: ${message.content}`);
    }
  }
}

// 📝 Message logger
class MessageLogger implements Observer<ChatMessage> {
  private logFile: ChatMessage[] = [];

  update(message: ChatMessage): void {
    this.logFile.push(message);
    console.log(`📝 Logged message #${this.logFile.length}`);
  }
}

// 🚫 Profanity filter
class ProfanityFilter implements Observer<ChatMessage> {
  private badWords = ['spam', 'scam', 'fake'];

  update(message: ChatMessage): void {
    const hasProfanity = this.badWords.some(word => 
      message.content.toLowerCase().includes(word)
    );
    
    if (hasProfanity) {
      console.log(`🚨 Warning: Inappropriate content detected from ${message.sender}!`);
    }
  }
}

// 🎮 Let's chat!
const chatRoom = new ChatRoom();
const logger = new MessageLogger();
const filter = new ProfanityFilter();

// Set up system observers
chatRoom.attach(logger);
chatRoom.attach(filter);

// Users join
const alice = new User('Alice');
const bob = new User('Bob');
const charlie = new User('Charlie');

chatRoom.join('Alice', alice);
chatRoom.join('Bob', bob);
chatRoom.join('Charlie', charlie);

// Chat simulation
chatRoom.sendMessage('Alice', 'Hey everyone! 👋');
chatRoom.sendMessage('Bob', 'Hi Alice! How are you?');
chatRoom.sendPrivateMessage('Alice', 'Bob', "I'm great! Want to grab coffee later? ☕");
chatRoom.sendMessage('Charlie', 'This chat is spam!'); // Triggers profanity filter
chatRoom.leave('Charlie');

🎓 Key Takeaways

You’ve mastered the Observer Pattern! Here’s what you’ve learned:

✅ Observer Pattern Basics: Subjects notify observers of state changes automatically
✅ Type-Safe Implementation: Use TypeScript interfaces and generics for robust code
✅ Real-World Applications: Stock tickers, game systems, shopping carts, and more
✅ Memory Management: Always detach observers to prevent memory leaks
✅ Advanced Patterns: Async observers, typed event emitters, and error handling

Remember: The Observer Pattern is perfect when you need loose coupling between objects that need to communicate! 🔌

🤝 Next Steps

Congratulations on mastering the Observer Pattern! 🎉 You’re becoming a true TypeScript design pattern expert!

Here’s what to explore next:

1. 📚 Try implementing Observer Pattern with RxJS for reactive programming
2. 🔄 Combine Observer with other patterns like Command or Mediator
3. 🏗️ Build a real-time notification system for your next project
4. 🚀 Check out the next tutorial: Strategy Pattern: Flexible Algorithms

The Observer Pattern is everywhere in modern applications - from React’s state management to Node.js EventEmitters. Now you have the power to use it effectively!

Keep building amazing event-driven systems! You’re doing fantastic! 💪✨