البرمجة التفاعلية في TypeScript: مكتبة RxJS

البرمجة التفاعلية في TypeScript: دليل شامل لـ RxJS

البرمجة التفاعلية هي نموذج تطوير يركز على تدفقات البيانات غير المتزامنة ونشر التغييرات. في نظام TypeScript، أقوى أداة لتنفيذ هذا النموذج هي مكتبة RxJS (الإضافات التفاعلية لجافا سكريبت). تتيح RxJS العمل مع الأحداث والطلبات غير المتزامنة وحالات التطبيق كتسلسلات بيانات يمكن تحويلها ودمجها وتصفيتها باستخدام عوامل تشغيل تعريفية.

المفاهيم الأساسية لـ RxJS

يقوم RxJS على ثلاث كيانات رئيسية:

\n
• Observable — مصدر بيانات يمكنه توليد قيم بمرور الوقت. يشبه المصفوفة، لكن العناصر تظهر بشكل غير متزامن.
\n
• Observer — مستهلك البيانات الذي يستجيب لثلاثة أنواع من الأحداث: next (قيمة جديدة)، error (خطأ)، و complete (إنهاء التدفق).
\n
• Subscription — كائن يمثل تنفيذ Observable. يسمح بإلغاء الاشتراك وتحرير الموارد.
\n

import { Observable } from 'rxjs';\n\nconst observable = new Observable<number>(subscriber => {\n  subscriber.next(1);\n  subscriber.next(2);\n  subscriber.next(3);\n  setTimeout(() => {\n    subscriber.next(4);\n    subscriber.complete();\n  }, 1000);\n});\n\nconst subscription = observable.subscribe({\n  next: (value) => console.log(`تم الاستلام: ${value}`),\n  error: (err) => console.error(`خطأ: ${err}`),\n  complete: () => console.log('تم إنهاء التدفق')\n});\n\n// إلغاء الاشتراك بعد 500 مللي ثانية\nsetTimeout(() => subscription.unsubscribe(), 500);

عوامل تشغيل RxJS: أساس التحويلات التفاعلية

عوامل التشغيل هي دوال نقية تأخذ Observable واحد وتعيد Observable جديد، دون تغيير الأصل. تنقسم إلى عدة فئات:

\n
• إنشائية: of، from، interval، fromEvent
\n
• تحويلية: map، pluck، scan، buffer
\n
• تصفية: filter، take، skip، distinctUntilChanged
\n
• دمج: merge، concat، combineLatest، zip
\n
• معالجة الأخطاء: catchError، retry، retryWhen
\n

import { fromEvent, interval } from 'rxjs';\nimport { map, filter, debounceTime, distinctUntilChanged } from 'rxjs/operators';\n\n// مثال: بحث تفاعلي مع debounce\nconst searchInput = document.getElementById('search') as HTMLInputElement;\nconst input$ = fromEvent(searchInput, 'input').pipe(\n  map(event => (event.target as HTMLInputElement).value),\n  filter(text => text.length >= 3),\n  debounceTime(300),\n  distinctUntilChanged()\n);\n\ninput$.subscribe(searchTerm => {\n  console.log(`بحث: ${searchTerm}`);\n  // تنفيذ طلب HTTP\n});

Subject: التدفقات الساخنة والباردة

Subject هو نوع خاص من Observable يعمل في نفس الوقت كمراقِب ومراقَب. يسمح بإرسال (نشر) نفس القيمة إلى عدة مشتركين. الأنواع الرئيسية:

\n
• Subject — أساسي، ينقل القيم الجديدة فقط
\n
• BehaviorSubject — يخزن آخر قيمة ويصدرها للمشتركين الجدد
\n
• ReplaySubject — يخزن مؤقتاً آخر N من القيم
\n
• AsyncSubject — يصدر القيمة الأخيرة فقط بعد إنهاء التدفق
\n

import { BehaviorSubject } from 'rxjs';\n\n// إدارة حالة التطبيق\ninter