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

مشروع تطبيقي شامل - متجر إلكتروني مشفر بـ TypeScript

أهداف المشروع الشامل

دمج جميع مهارات TypeScript: الواجهات، الـ Arrays الصارمة، الـ useState المشفرة، وإدارة العمليات الرياضية.
بناء تطبيق سلة تسوق ديناميكي خالي تماماً من أي نوع مبهم أو أخطاء غير معالجة.
تنفيذ عمليات الإضافة والحذف مع الحفاظ على سلامة الأنواع CartItem[].
حساب الإحصائيات (المجموع، عدد القطع) باستخدام reduce بأنواع صريحة.

1. ميزات مشروع سلة التسوق

يضمن لك هذا التطبيق عدم إمكانية إضافة أو تعديل خصائص غير معروفة في عناصر السلة، وحساب المجموع المالي بدقة متناهية تحت تدقيق المترجم.

tsx

// كل عنصر في السلة يلتزم بواجهة CartItem
interface CartItem {
  id: number;
  title: string;
  price: number;
  quantity: number;
}

// الحالة العامة بأنواع صريحة
const [cart, setCart] = useState<CartItem[]>([]);

// التحديث الصارم للنوع
setCart([...cart, newItem]);

2. أنواع العمليات الأساسية في السلة

➕ الإضافة الآمنة

عند إضافة عنصر جديد، نستخدم setCart([...cart, newItem]) للحفاظ على اللامتغيرية (Immutability) بأنواع صحيحة.

➖ الحذف بالمعرّف

نستخدم cart.filter(item => item.id !== id) لحذف عنصر، مع ضمان أن كل عنصر ما زال من نوع CartItem.

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

تحدي إتمام المسار: إضافة خاصية الحذف وعدد القطع

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

أنشئ دالة باسم removeItem تقبل معاملاً من نوع id: number وتُرجع void.
داخل الدالة، استخدم setCart(cart.filter(item => item.id !== id)) لحذف العنصر المطابق.
أضف زر "حذف" لكل عنصر في القائمة يربط onClick بالدالة removeItem(item.id).
أنشئ متغيراً جديداً باسم totalItems يحسب مجموع الكميات (quantity) باستخدام reduce.
اعرض totalItems في واجهة السلة أسفل المجموع الإجمالي.

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

الدرس السابق إنهاء مسار TypeScript بالكامل