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

TypeScript में रिएक्टिव प्रोग्रामिंग: RxJS की संपूर्ण गाइड

रिएक्टिव प्रोग्रामिंग एक डेवलपमेंट पैराडाइम है जो एसिंक्रोनस डेटा फ्लो और बदलावों के प्रसार पर केंद्रित है। TypeScript इकोसिस्टम में इस पैराडाइम को लागू करने का सबसे शक्तिशाली टूल RxJS (Reactive Extensions for JavaScript) लाइब्रेरी है। RxJS आपको इवेंट्स, एसिंक्रोनस रिक्वेस्ट और ऐप स्टेट को डेटा सीक्वेंस के रूप में मैनेज करने देता है, जिन्हें डिक्लेरेटिव ऑपरेटर्स की मदद से ट्रांसफॉर्म, कंबाइन और फिल्टर किया जा सकता है।

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

RxJS के केंद्र में तीन प्रमुख इकाइयाँ हैं:

• Observable — डेटा का स्रोत जो समय के साथ वैल्यू जनरेट करता है। यह एक ऐरे की तरह है, लेकिन इसमें एलिमेंट एसिंक्रोनस रूप से आते हैं।
• Observer — डेटा का उपभोक्ता जो तीन प्रकार के इवेंट पर प्रतिक्रिया करता है: next (नई वैल्यू), error (एरर) और complete (स्ट्रीम का समाप्त होना)।
• Subscription — एक ऑब्जेक्ट जो 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);
});

const subscription = observable.subscribe({
  next: (value) => console.log(`प्राप्त हुआ: ${value}`),
  error: (err) => console.error(`एरर: ${err}`),
  complete: () => console.log('स्ट्रीम समाप्त')
});

// 500 मिलीसेकंड बाद सब्सक्रिप्शन रद्द करें
setTimeout(() => subscription.unsubscribe(), 500);

RxJS ऑपरेटर्स: रिएक्टिव ट्रांसफॉर्मेशन की नींव

ऑपरेटर्स शुद्ध फंक्शन होते हैं जो एक Observable लेते हैं और एक नया Observable लौटाते हैं, बिना मूल को बदले। ये कई श्रेणियों में विभाजित हैं:

• क्रिएट करने वाले: of, from, interval, fromEvent
• ट्रांसफॉर्म करने वाले: map, pluck, scan, buffer
• फिल्टर करने वाले: filter, take, skip, distinctUntilChanged
• कंबाइन करने वाले: merge, concat, combineLatest, zip
• एरर हैंडलिंग: catchError, retry, retryWhen

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

// उदाहरण: debounce के साथ रिएक्टिव सर्च
const searchInput = document.getElementById('search') as HTMLInputElement;
const input$ = fromEvent(searchInput, 'input').pipe(
  map(event => (event.target as HTMLInputElement).value),
  filter(text => text.length >= 3),
  debounceTime(300),
  distinctUntilChanged()
);

input$.subscribe(searchTerm => {
  console.log(`सर्च: ${searchTerm}`);
  // HTTP रिक्वेस्ट करें
});

Subject: हॉट और कोल्ड स्ट्रीम्स

Subject एक विशेष प्रकार का Observable है जो एक साथ ऑब्जर्वर और ऑब्जर्वेबल दोनों की तरह काम करता है। यह एक ही वैल्यू को कई सब्सक्राइबर्स तक मल्टीकास्ट (प्रसारित) करने की सुविधा देता है। मुख्य प्रकार:

• Subject — बेसिक, केवल नई वैल्यू भेजता है
• BehaviorSubject — अंतिम वैल्यू स्टोर करता है और नए सब्सक्राइबर्स को देता है
• ReplaySubject — पिछली N वैल्यू को बफर करता है
• AsyncSubject — स्ट्रीम समाप्त होने के बाद केवल अंतिम वैल्यू भेजता है

import { BehaviorSubject } from 'rxjs';

// ऐप स्टेट मैनेजमेंट
interface AppState {
  user: string | null;
  isAuthenticated: boolean;
}

const in