TypeScript • المستوى الثالث • الدرس 4

بناء الخطافات المخصصة المشفرة (Typing Custom Hooks)

أهداف الدرس العلمية

تجميع المنطق التفاعلي وتصديره عبر Custom Hooks موثقة بالأنواع.
تعريف واجهة صريحة للقيمة المرجعة UseCounterReturn بدل الاعتماد على الاستنتاج.
توسيع الـ Hook بإضافة دوال جديدة مع تحديث واجهته بشكل متسق.
تمرير معاملات بتهيئة افتراضية (Default Parameters) بأنواع صحيحة.

1. ما هي Custom Hooks؟

هي دوال JavaScript تبدأ بكلمة use تسمح لك بمشاركة المنطق البرمجي الحركي بين أكثر من مكون دون تكرار الأكواد. عند دمجها مع TypeScript، نُعرِّف واجهة صريحة للقيمة المرجعة لضمان وضوح ما يُرجعه الـ Hook.

tsx

// ✅ تعريف الواجهة أولاً
interface UseToggleReturn {
  value: boolean;
  toggle: () => void;
  setTrue: () => void;
  setFalse: () => void;
}

function useToggle(initial: boolean = false): UseToggleReturn {
  const [value, setValue] = useState<boolean>(initial);
  return {
    value,
    toggle: () => setValue(v => !v),
    setTrue: () => setValue(true),
    setFalse: () => setValue(false),
  };
}

// الاستخدام داخل المكون
const { value, toggle } = useToggle(false);

2. أفضل الممارسات في كتابة Custom Hooks

🎯 تعريف واجهة الإرجاع

اكتب interface UseXReturn لتوثيق ما يُرجعه الـ Hook. يجعل الكود مقروءاً وتتحسن تلميحات الـ IDE.

⚡ التسمية الإلزامية

يجب أن يبدأ اسم الـ Hook بـ use (مثل useCounter، useToggle)، وإلا فلن تتعرف React عليه كـ Hook صالح.

التطبيق العملي المباشر

تحدي الدرس الرابع: إضافة دالة إعادة تعيين للـ Hook

قم بالتعديل على الكود بداخل المحرر أدناه لتطبيق المتطلبات التالية:

أضف دالة reset إلى useCounter تُرجع العدّاد إلى قيمته الابتدائية initialValue.
حدّث واجهة UseCounterReturn لتشمل خاصية reset: () => void.
غيّر قيمة البداية عند الاستدعاء من useCounter(10) إلى useCounter(50).
أضف زر "إعادة تعيين" يربط حدث النقر بالدالة reset.

⏳ جارٍ تحميل المحرر التفاعلي...

الدرس السابق الانتقال للمستوى الرابع