जेनेरिक इवेंट एमिटर क्लास
शुरुआत से पुनः उपयोग योग्य, टाइप किए गए इवेंट एमिटर बनाएँ।
जेनेरिक इवेंट एमिटर क्लास, CoddyKit पर TypeScript Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह TypeScript Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। TypeScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
लक्ष्य: एक TypedEmitter क्लास
हम इवेंट मैप E पर सामान्यीकृत एक पुनः उपयोग योग्य TypedEmitter<E> क्लास बनाएँगे, जिसमें पूरी तरह टाइप की गई on, off और emit विधियाँ होंगी।
interface Events { login: { userId: string }; logout: void }
// class TypedEmitter<Events> will manage handlers safely.
console.log("building a typed emitter");हैंडलर प्रकार का उपनाम
इवेंट नाम के अनुसार पैरामीटर वाला हैंडलर प्रकार परिभाषित करें, ताकि हर लिस्नर को सही पेलोड मिले।
type Handler<E, K extends keyof E> = (payload: E[K]) => void;
// E[K] is the payload type for event K in map E.
console.log("handler typed by E[K]");listeners मैप
हैंडलर को इवेंट नाम के आधार पर संग्रहीत करें। मैप किया गया प्रकार हर कुंजी के लिए सही प्रकार वाले हैंडलर का एक ऐरे देता है।
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
}
console.log("listeners map ready");on लागू करना
on विधि किसी इवेंट के ऐरे में हैंडलर जोड़ती है और पहली बार उपयोग होने पर वह ऐरे बनाती है।
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(event: K, handler: (p: E[K]) => void): void {
(this.listeners[event] ||= []).push(handler);
}
}
console.log("on implemented");emit लागू करना
emit विधि इवेंट के हैंडलर ढूँढती है और हर हैंडलर को टाइप किए गए पेलोड के साथ कॉल करती है।
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(e: K, h: (p: E[K]) => void) { (this.listeners[e] ||= []).push(h); }
emit<K extends keyof E>(e: K, payload: E[K]): void {
(this.listeners[e] || []).forEach(h => h(payload));
}
}
console.log("emit implemented");off लागू करना
off विधि पहले से पंजीकृत हैंडलर को ऐरे से फ़िल्टर करके हटा देती है।
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(e: K, h: (p: E[K]) => void) { (this.listeners[e] ||= []).push(h); }
off<K extends keyof E>(e: K, h: (p: E[K]) => void) {
this.listeners[e] = (this.listeners[e] || []).filter(x => x !== h);
}
}
console.log("off implemented");क्लास को एक साथ रखना
यहाँ सभी तीन विधियों वाली पूरी क्लास है, जो आपके दिए गए किसी भी इवेंट मैप पर सामान्यीकृत है।
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(e: K, h: (p: E[K]) => void) { (this.listeners[e] ||= []).push(h); }
off<K extends keyof E>(e: K, h: (p: E[K]) => void) { this.listeners[e] = (this.listeners[e] || []).filter(x => x !== h); }
emit<K extends keyof E>(e: K, p: E[K]) { (this.listeners[e] || []).forEach(h => h(p)); }
}
console.log("TypedEmitter complete");TypedEmitter का उपयोग करना
किसी ठोस इवेंट मैप के साथ इसका इंस्टैंस बनाएँ। अब उन इवेंट के लिए on और emit पूरी तरह टाइप किए गए हैं।
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(e: K, h: (p: E[K]) => void) { (this.listeners[e] ||= []).push(h); }
emit<K extends keyof E>(e: K, p: E[K]) { (this.listeners[e] || []).forEach(h => h(p)); }
}
interface Events { login: { userId: string } }
const bus = new TypedEmitter<Events>();
bus.on("login", p => console.log("hi", p.userId));
bus.emit("login", { userId: "u1" });प्रकार संबंधी त्रुटियाँ पकड़ ली जाती हैं
यह क्लास संकलन-समय पर अज्ञात इवेंट और गलत पेलोड को अस्वीकार करती है, ठीक वैसे ही जैसे स्वतंत्र फ़ंक्शन करते थे।
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(e: K, h: (p: E[K]) => void) { (this.listeners[e] ||= []).push(h); }
emit<K extends keyof E>(e: K, p: E[K]) { (this.listeners[e] || []).forEach(h => h(p)); }
}
interface Events { ping: { at: number } }
const bus = new TypedEmitter<Events>();
// bus.emit("pong", { at: 1 }); // Error
bus.emit("ping", { at: 1 });
console.log("typed bus");हर इवेंट के लिए अनेक हैंडलर
क्योंकि हर इवेंट एक ऐरे से जुड़ा होता है, इसलिए आप कई हैंडलर पंजीकृत कर सकते हैं और emit होने पर वे सभी सक्रिय हो जाते हैं।
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(e: K, h: (p: E[K]) => void) { (this.listeners[e] ||= []).push(h); }
emit<K extends keyof E>(e: K, p: E[K]) { (this.listeners[e] || []).forEach(h => h(p)); }
}
interface Events { tick: { n: number } }
const bus = new TypedEmitter<Events>();
bus.on("tick", p => console.log("a", p.n));
bus.on("tick", p => console.log("b", p.n));
bus.emit("tick", { n: 7 });एक ऐसा आधार जिसे आप बढ़ा सकते हैं
यह क्लास एक मजबूत आधार है। अगले चरण में हम लिस्नर-तर्क के प्रकार का अनुमान बेहतर करेंगे और once का व्यवहार जोड़ेंगे।
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(e: K, h: (p: E[K]) => void) { (this.listeners[e] ||= []).push(h); }
emit<K extends keyof E>(e: K, p: E[K]) { (this.listeners[e] || []).forEach(h => h(p)); }
}
const bus = new TypedEmitter<{ go: void }>();
bus.on("go", () => console.log("go!"));
bus.emit("go", undefined as void);त्वरित जाँच: सामान्य इवेंट एमिटर क्लास
सामान्य इवेंट एमिटर क्लास की अपनी समझ जाँचें।
पुनरावलोकन: सामान्य इवेंट एमिटर क्लास
आपने TypedEmitter<E> बनाया, जिसमें मैप किए गए listeners स्टोर और पूरी तरह टाइप की गई on, off तथा emit विधियाँ हैं। इससे किसी भी इवेंट मैप के लिए पुनः उपयोग योग्य, प्रकार-सुरक्षित प्रकाशन-सदस्यता प्रणाली मिलती है।
class TypedEmitter<E> {
private listeners: { [K in keyof E]?: Array<(p: E[K]) => void> } = {};
on<K extends keyof E>(e: K, h: (p: E[K]) => void) { (this.listeners[e] ||= []).push(h); }
emit<K extends keyof E>(e: K, p: E[K]) { (this.listeners[e] || []).forEach(h => h(p)); }
}
const bus = new TypedEmitter<{ hi: { name: string } }>();
bus.on("hi", p => console.log(p.name));
bus.emit("hi", { name: "Ada" });एआई शिक्षक के साथ TypeScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 101
- पाठ
- 352
अक्सर पूछे जाने वाले प्रश्न
क्या “जेनेरिक इवेंट एमिटर क्लास” पाठ निःशुल्क है?
हाँ—“जेनेरिक इवेंट एमिटर क्लास” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और TypeScript Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। TypeScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“जेनेरिक इवेंट एमिटर क्लास” में मैं क्या सीखूँगा?
शुरुआत से पुनः उपयोग योग्य, टाइप किए गए इवेंट एमिटर बनाएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ TypeScript Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या TypeScript Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर TypeScript Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।
“जेनेरिक इवेंट एमिटर क्लास” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस TypeScript Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर TypeScript Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- इवेंट मैप के प्रकार निर्धारित करना
- emit और on का प्रकार-सुरक्षित उपयोग
- जेनेरिक इवेंट एमिटर क्लास
- लिसनर आर्ग्युमेंट का अनुमान