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

البرمجة التفاعلية في TypeScript باستخدام RxJS

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

تعتمد RxJS على نمط Observer ومفهوم Observable (التدفق القابل للملاحظة). يمثل Observable مصدر بيانات يمكنه توليد قيم بمرور الوقت. يمكن الاشتراك فيه باستخدام Observer، الذي يستجيب لثلاثة أنواع من الأحداث: next (قيمة جديدة)، error (خطأ)، و complete (اكتمال التدفق).

تثبيت وإعداد RxJS في TypeScript

للبدء، قم بتثبيت RxJS عبر npm:

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