TypeScript में रिएक्टिव प्रोग्रामिंग: RxJS लाइब्रेरी

RxJS के साथ TypeScript में रिएक्टिव प्रोग्रामिंग

रिएक्टिव प्रोग्रामिंग एक डेवलपमेंट पैराडाइम है जो एसिंक्रोनस डेटा स्ट्रीम और परिवर्तनों के प्रसार पर केंद्रित है। TypeScript इकोसिस्टम में, इस पैराडाइम को लागू करने के लिए मुख्य उपकरण RxJS (JavaScript के लिए रिएक्टिव एक्सटेंशन) लाइब्रेरी है। यह इवेंट्स, एसिंक्रोनस रिक्वेस्ट और किसी भी डेटा स्ट्रीम के साथ काम करने के लिए उपकरणों का एक शक्तिशाली सेट प्रदान करता है, जिससे कोड अधिक पूर्वानुमानित और आसानी से बनाए रखने योग्य बनता है।

RxJS Observer पैटर्न और Observable (अवलोकनीय स्ट्रीम) की अवधारणा पर आधारित है। Observable डेटा का एक स्रोत है जो समय के साथ मान उत्पन्न कर सकता है। Observer का उपयोग करके इसकी सदस्यता ली जा सकती है, जो तीन प्रकार की घटनाओं पर प्रतिक्रिया करता है: next (नया मान), error (त्रुटि) और complete (स्ट्रीम का समापन)।

TypeScript में RxJS की स्थापना और कॉन्फ़िगरेशन

आरंभ करने के लिए, npm के माध्यम से RxJS स्थापित करें:

npm install rxjs

RxJS TypeScript के साथ पूरी तरह से संगत है और इसमें बिल्ट-इन टाइपिंग है। Observable बनाने का एक सरल उदाहरण यहां दिया गया है:

import { Observable } from 'rxjs';

const observable = new Observable<number>(subscriber => {  subscriber.next(1);  subscriber.next(2);  subscriber.next(3);  setTimeout(() => {    subscriber.next(4);    subscriber.complete();  }, 1000);});

observable.subscribe({  next: (value) => console.log('प्राप्त:', value),  error: (err) => console.error('त्रुटि:', err),  complete: () => console.log('स्ट्रीम समाप्त')});

RxJS की मुख्य अवधारणाएँ

रिएक्टिव प्रोग्रामिंग का प्रभावी ढंग से उपयोग करने के लिए, RxJS के प्रमुख बिल्डिंग ब्लॉक्स को समझना महत्वपूर्ण है:

• Observable — डेटा का स्रोत जो सिंक्रोनस या एसिंक्रोनस हो सकता है।
• Observer — next, error, complete विधियों वाला एक ऑब्जेक्ट जो Observable की घटनाओं पर प्रतिक्रिया करता है।
• Subscription — एक ऑब्जेक्ट जो Observable के निष्पादन का प्रतिनिधित्व करता है। इसे unsubscribe() विधि से रद्द किया जा सकता है।
• Operators — डेटा स्ट्रीम को बदलने, फ़िल्टर करने और संयोजित करने के लिए शुद्ध फ़ंक्शन।
• Subject — एक विशेष प्रकार का Observable जो एक साथ Observer भी है। यह कई सब्सक्राइबर्स को मानों का मल्टीकास्ट (वितरण) करने की अनुमति देता है।

लोकप्रिय RxJS ऑपरेटर

ऑपरेटर RxJS का हृदय हैं। वे डेटा स्ट्रीम को घोषणात्मक रूप से संसाधित करने की अनुमति देते हैं। आइए कुछ सामान्यतः उपयोग किए जाने वाले ऑपरेटरों पर नज़र डालें:

• map — स्ट्रीम के प्रत्येक मान को दिए गए फ़ंक्शन के अनुसार रूपांतरित करता है।
• filter — केवल उन मानों को पास करता है जो शर्त को पूरा करते हैं।
• mergeMap — प्रत्येक मान को Observable पर प्रोजेक्ट करता है और परिणामों को एक स्ट्रीम में मर्ज करता है।
• debounceTime — निर्दिष्ट समय के लिए मानों के उत्सर्जन में देरी करता है (खोज बार के लिए उपयोगी)।
• catchError — स्ट्रीम में त्रुटियों को पकड़ता है और एक बैकअप Observable लौटाता है।

क्लिक को संसाधित करने के लिए ऑपरेटरों के उपयोग का उदाहरण:

import { fromEvent } from 'rxjs';import { map, filter, debounceTime } from 'rxjs/operators';

const clicks = fromEvent(document, 'click');

clicks.pipe(  debounceTime(300),  map((event: MouseEvent) => ({    x: event.clientX,    y: event.clientY  })),  filter(pos => pos.x > 100)).subscribe(pos => {  console.log('निर्देशांक के साथ क्लिक:', pos);});

व्यावहारिक उदाहरण: रिएक्टिव सर्च फॉर्म

एक सामान्य कार्य पर विचार करें - ऑटो-कम्प्लीट के साथ खोज का कार्यान्वयन। RxJS के साथ, यह सुरुचिपूर्ण ढंग से और बिना नेस्टेड कॉलबैक के किया जाता है:

import { fromEvent } f