TypeScript में Event Bus और Observer पैटर्न: कोड के साथ सीखें

TypeScript में Event Bus और Observer पैटर्न: थ्योरी से प्रैक्टिस तक

आधुनिक वेब डेवलपमेंट में एक लचीली और स्केलेबल आर्किटेक्चर की ज़रूरत होती है। दो प्रमुख पैटर्न जो कंपोनेंट्स के बीच इंटरैक्शन को व्यवस्थित करने में मदद करते हैं, वे हैं Event Bus और Observer। इस आर्टिकल में हम TypeScript में इनकी रियलाइज़ेशन, फायदे और प्रैक्टिकल उपयोग के तरीकों को समझेंगे।

Observer पैटर्न क्या है?

Observer (ऑब्ज़र्वर) पैटर्न एक बिहेवियरल डिज़ाइन पैटर्न है जो ऑब्जेक्ट्स के बीच "एक-से-अनेक" डिपेंडेंसी को परिभाषित करता है। जब एक ऑब्जेक्ट (पब्लिशर) अपनी स्थिति बदलता है, तो सभी डिपेंडेंट ऑब्जेक्ट्स (सब्सक्राइबर्स) को ऑटोमैटिकली सूचित और अपडेट किया जाता है।

पैटर्न के मुख्य तत्व:

• Subject (पब्लिशर) — वह ऑब्जेक्ट जो बदलावों को ट्रैक करता है और सब्सक्राइबर्स को सूचित करता है।
• Observer (सब्सक्राइबर) — वह ऑब्जेक्ट जो पब्लिशर के बदलावों की सदस्यता लेता है।
• Event Bus (इवेंट बस) — एक केंद्रीकृत मैकेनिज़्म जो सब्सक्रिप्शन और कंपोनेंट्स के बीच इवेंट भेजने का प्रबंधन करता है।

TypeScript में Event Bus की रियलाइज़ेशन

TypeScript सख्त टाइपिंग के लिए शानदार सुविधाएँ प्रदान करता है, जो Event Bus की रियलाइज़ेशन को सुरक्षित और अनुमानित बनाती हैं। आइए एक बेसिक रियलाइज़ेशन देखें:

type EventHandler<T = any> = (payload: T) => void;

class EventBus {
  private listeners: Map<string, EventHandler[]> = new Map();

  // इवेंट की सदस्यता लें
  subscribe<T>(event: string, handler: EventHandler<T>): void {
    if (!this.listeners.has(event)) {
      this.listeners.set(event, []);
    }
    this.listeners.get(event)!.push(handler);
  }

  // सदस्यता रद्द करें
  unsubscribe<T>(event: string, handler: EventHandler<T>): void {
    const handlers = this.listeners.get(event);
    if (handlers) {
      this.listeners.set(
        event,
        handlers.filter(h => h !== handler)
      );
    }
  }

  // इवेंट प्रकाशित करें
  emit<T>(event: string, payload: T): void {
    const handlers = this.listeners.get(event);
    if (handlers) {
      handlers.forEach(handler => handler(payload));
    }
  }

  // सभी सदस्यताएँ साफ़ करें
  clear(): void {
    this.listeners.clear();
  }
}

export const eventBus = new EventBus();

टाइप किए गए इवेंट्स के साथ उपयोग का उदाहरण

टाइप सुरक्षा बढ़ाने के लिए, आप इवेंट इंटरफ़ेस परिभाषित कर सकते हैं:

// इवेंट टाइप्स को परिभाषित करें
interface AppEvents {
  'user:login': { userId: string; timestamp: number };
  'user:logout': { userId: string };
  'data:update': { id: string; data: unknown };
  'notification:show': { message: string; type: 'success' | 'error' | 'info' };
}

// टाइप की गई बस बनाएं
class TypedEventBus {
  private listeners: Map<string, Function[]> = new Map();

  on<K extends keyof AppEvents>(
    event: K,
    handler: (payload: AppEvents[K]) => void
  ): void {
    if (!this.listeners.has(event)) {
      this.listeners.set(event, []);
    }
    this.listeners.get(event)!.push(handler);
  }

  emit<K extends keyof AppEvents>(
    event: K,
    payload: AppEvents[K]
  ): void {
    const handlers = this.listeners.get(event);
    if (handlers) {
      handlers.forEach(handler => handler(payload));
    }
  }

  off<K extends keyof AppEvents>(
    event: K,
    handler: (payload: AppEvents[K]) => void
  ): void {
    const handlers = this.listeners.get(event);
    if (handlers) {
      this.listeners.set(
        event,
        handlers.filter(h => h !== handler)
      );
    }
  }
}

export const typedBus = new TypedEventBus();

प्रैक्टिकल उदाहरण: नोटिफिकेशन सिस्टम

आइए एक वास्तविक परिदृश्य देखें — Event Bus का उपयोग करके नोटिफिकेशन सिस्टम बनाना:

// नोटिफिकेशन कंपोनेंट
class NotificationService {
  constructor() {
    typedBus.on('notifica