Callbacks

مفهوم ~18 دقيقة

Callbacks

الـ callback هي دالة تمررها لدالة أخرى حتى تستدعيها في الوقت المناسب. في JavaScript هذا نمط شائع جداً، وTypeScript يجعله أوضح بتحديد نوع callback. مثلاً دالة filterItems تحتاج callback يرجع boolean، ودالة mapItems تحتاج callback يحول عنصرًا إلى قيمة أخرى.

لا تستخدم Function كنوع. هذا واسع جداً ولا يخبرك شيئاً عن المعاملات أو القيمة المرجعة. اكتب signature دقيقة مثل (item: CartItem) => boolean.

مثال عملي

index.ts

type Item = {
  name: string;
  price: number;
};

function filterItems(items: Item[], predicate: (item: Item) => boolean): Item[] {
  return items.filter(predicate);
}

const items: Item[] = [
  { name: "book", price: 20 },
  { name: "course", price: 100 },
];

console.log(filterItems(items, (item) => item.price >= 50).length);

Output:

TypeScript يعرف أن item داخل callback هو Item، لذلك يقترح name وprice.

strictFunctionTypes والـ Variance

مع "strict": true في tsconfig، يُفعَّل strictFunctionTypes الذي يطبّق contravariance على معاملات callbacks. بكلمات بسيطة: callback تقبل Animal يمكن تمريرها حيث نوع callback هو Dog extends Animal، لكن العكس غير آمن. هذا يمنع فئة من أخطاء runtime الصامتة.

type AnimalCallback = (a: Animal) => void;
type DogCallback    = (d: Dog)    => void;
// DogCallback لا تتبادل مع AnimalCallback بأمان إذا كان الكود يمرر Animal

في الكود اليومي نادراً تصادف هذا مباشرة، لكن عندما يرفض TypeScript callback يبدو صحيحاً، ابحث في اتجاه strictFunctionTypes.

readable callbacks

إذا أصبح callback طويلاً، انقله إلى دالة باسم واضح مثل isPremiumItem. لا تجعل السطر الواحد يتحول إلى لغز.

تحدي — Challenge

const numbers = [5, 12, 20];

const large = numbers.filter((value) => {
  /* TODO */
  return false; // أرجع true للأرقام الأكبر من 10 — Return true for values above 10
});

console.log(large.length);