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

إدارة الحالات والأحداث (Typing React Hooks & Event Handlers)

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

تحديد أنواع الحالات الصريحة مع useState وقبول القيم المعدومة null.
تنميط أحداث العناصر (Event Types) مثل React.ChangeEvent و React.MouseEvent.
التعامل الآمن مع أحداث حقول الإدخال وقراءة e.target.value بدون أخطاء.
تطبيق الحماية من أخطاء المراجع الفارغة (Null Safety) في حالة الكائنات المعقدة.

1. تنميط React Hooks (useState)

تستنتج TypeScript نوع الحالة تلقائياً عند استخدام قيم بدائية مثل الأرقام والنصوص، ولكن عند التعامل مع كائنات متغيرة أو حالات تبدأ بـ null، نحرص على توصيف المتغير المستلم أو الواجهة بوضوح.

tsx

// 1️⃣ حالة برقم مستنتجة تلقائياً
const [count, setCount] = useState(0);

// 2️⃣ حالة بكائن مع دعم null — يجب تحديد النوع صراحةً
const [user, setUser] = useState<User | null>(null);

// 3️⃣ إسناد كائن يلتزم بالواجهة
const newUser: User = { id: 101, name: 'جمال', email: '[email protected]' };
setUser(newUser);

2. تنميط معالجات الأحداث (Event Handlers)

📝 React.ChangeEvent

تُستخدم مع حقول الإدخال <HTMLInputElement> لقراءة البيانات وتتبع التغييرات بـ e.target.value.

🖱️ React.MouseEvent

تُستخدم لمعالجة نقرات الأزرار والعناصر <HTMLButtonElement> بشكل آمن.

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

تحدي الدرس الثاني: إضافة خاصية تسجيل الخروج

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

قم بإنشاء دالة باسم handleLogout تقوم بإعادة تعيين حالة user إلى null.
أضف زر جديد باسم "تسجيل الخروج" يظهر فقط عندما يكون الكائن user غير فارغ.
اربط حدث النقر onClick للزر الجديد بالدالة handleLogout.
اختبر تسجيل الدخول ثم تسجيل الخروج بالمعاينة واضغط "تشغيل الكود".

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

الدرس السابق الانتقال للدرس الثالث