Event Bus और Observer पैटर्न TypeScript में: कार्यान्वयन और उदाहरण

TypeScript में Event Bus और Observer पैटर्न

Observer पैटर्न (प्रेक्षक) और इसका व्यावहारिक कार्यान्वयन — Event Bus (ईवेंट बस) — ढीले-युग्मित, स्केलेबल अनुप्रयोगों के निर्माण के लिए मूलभूत उपकरण हैं। इस लेख में, हम विस्तार से समझेंगे कि सख्त टाइपिंग का उपयोग करके TypeScript में Event Bus को कैसे लागू किया जाए, और शैक्षिक परियोजनाओं में इसके अनुप्रयोग पर विचार करेंगे।

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

Observer पैटर्न वस्तुओं के बीच "एक-से-अनेक" संबंध को परिभाषित करता है। जब एक वस्तु (प्रकाशक, subject) अपनी स्थिति बदलती है, तो उस पर निर्भर सभी वस्तुएं (प्रेक्षक, observers) स्वचालित रूप से सूचित और अद्यतन होती हैं। यह घटकों के कठोर युग्मन से बचने में मदद करता है।

Event Bus क्या है?

Event Bus (ईवेंट बस) एक केंद्रीकृत तंत्र है जो Observer पैटर्न को लागू करता है। प्रेक्षकों को सीधे प्रकाशक पर सब्सक्राइब करने के बजाय, सभी घटक एक एकल बस के माध्यम से संवाद करते हैं। एक घटक यह कर सकता है:

• किसी विशिष्ट ईवेंट की सदस्यता लेना (subscribe/listen)।
• एक ईवेंट प्रकाशित करना (emit/publish), जो सभी सब्सक्राइबर्स को भेजा जाएगा।
• जब आवश्यक न हो तो ईवेंट से सदस्यता समाप्त करना (unsubscribe)।

यह दृष्टिकोण इसके लिए आदर्श है:

• उन मॉड्यूलों के बीच बातचीत जिन्हें एक-दूसरे के बारे में जानने की आवश्यकता नहीं है।
• उपयोगकर्ता क्रियाओं (क्लिक, डेटा इनपुट) को संसाधित करना।
• एप्लिकेशन की स्थिति में परिवर्तनों (डेटा लोडिंग, त्रुटियाँ) पर प्रतिक्रिया देना।

TypeScript में Event Bus का कार्यान्वयन

TypeScript एक शक्तिशाली टाइप सिस्टम जोड़ता है, जो Event Bus को सुरक्षित और पूर्वानुमानित बनाता है। हम एक टाइप की गई बस बनाएंगे, जहां प्रत्येक ईवेंट में कड़ाई से परिभाषित तर्कों का सेट होता है।

1. ईवेंट प्रकारों की परिभाषा

पहले, ईवेंट नामों और उनके तर्कों के मैपिंग के लिए एक इंटरफ़ेस परिभाषित करें:

// ईवेंट मैप को परिभाषित करें: कुंजी — ईवेंट का नाम, मान — तर्कों का प्रकारinterface EventMap {    'user:login': { userId: string; timestamp: number };    'data:loaded': { items: string[] };    'error:occurred': { message: string; code: number };    // कोई अन्य ईवेंट जोड़ा जा सकता है}

2. EventBus क्लास बनाना

अब, सख्त टाइपिंग के लिए जेनेरिक का उपयोग करके क्लास बनाएं:

type Listener<T> = (payload: T) => void;

class EventBus<T extends Record<string, unknown>> {    private listeners: Map<keyof T, Set<Listener<unknown>>> = new Map();

    // ईवेंट की सदस्यता लेना    subscribe<K extends keyof T>(event: K, listener: Listener<T[K]>): () => void {        if (!this.listeners.has(event)) {            this.listeners.set(event, new Set());        }        const currentListeners = this.listeners.get(event)!;        currentListeners.add(listener as Listener<unknown>);

        // सदस्यता समाप्त करने के लिए फ़ंक्शन लौटाएं        return () => {            currentListeners.delete(listener as Listener<unknown>);        };    }

    // ईवेंट प्रकाशित करना    emit<K extends keyof T>(event: K, payload: T[K]): void {        const currentListeners = this.listeners.get(event);        if (currentListeners) {            currentListeners.forEach((listener) => {                listener(payload);            });        }    }

    // सभी ईवेंट से सदस्यता समाप्त करना (सफाई के लिए उपयोगी)    clear(): void {        this.listeners.clear();    }}

// हमारे ईवेंट मैप के साथ बस का एक उदाहरण बनाएंexport const appEventBus = new EventBus<EventMap>();

3. उपयोग का उदाहरण

देखें कि विभिन्न मॉड्यूल Event Bus के माध्यम से कैसे बातचीत कर सकते हैं:

// प्रमाणीकरण मॉड्यूलclass AuthService {    login(userId: string) {        // ... लॉगिन लॉजिक ...        appEventBus.emit('use