مشروع: عنصر مخزون عام

جزء من قسم مقدمة إلى TypeScript في رحلة JavaScript على Coddy. الدرس 63 من 73.

مرحباً بك في مشروع TypeScript الأول الخاص بك! أنت على وشك بناء نظام إدارة مخزون عام يوضح القوة الحقيقية للأنواع العامة (generics) في الواقع العملي. سيوضح لك هذا المشروع كيف يمكن للأنواع العامة (generics) إنشاء كود مرن وقابل لإعادة الاستخدام يعمل مع أنواع مختلفة من البيانات مع الحفاظ على السلامة التامة للأنواع (type safety).

إن أساس أي نظام مخزون هو تحديد شكل عنصر المخزون. في النهج التقليدي، قد تقوم بإنشاء واجهات (interfaces) منفصلة للكتب، والإلكترونيات، والملابس، وأنواع المنتجات الأخرى. ولكن مع الـ generics، يمكنك إنشاء هيكل مرن واحد يتكيف مع أي نوع من تفاصيل المنتج.

مهمتك الأولى هي إنشاء واجهة عامة تسمى InventoryItem<T>. ستمثل هذه الواجهة الهيكل المشترك الذي تشترك فيه جميع عناصر المخزون: فهي تحتاج إلى id للتعريف، و quantity لتتبع مستويات المخزون، وخاصية details يمكنها الاحتفاظ بأي نوع من المعلومات الخاصة بالمنتج.

يحدث السحر مع معلمة النوع العام T. يتيح ذلك لخاصية details أن تكون مرنة تماماً - فقد تكون معلومات كتاب، أو مواصفات إلكترونية، أو أي بيانات منتج أخرى - بينما تظل الـ id والـ quantity مكتوبة بشكل ثابت كأرقام عبر جميع عناصر المخزون.

التحدي

سهل

أنشئ واجهة عامة (generic interface) باسم InventoryItem تمثل هيكل أي عنصر مخزون في نظام الإدارة الخاص بك.

يجب أن تقوم الواجهة بما يلي:

استخدام معامل نوع عام T
أن تحتوي على خاصية id من نوع number
أن تحتوي على خاصية quantity من نوع number
أن تحتوي على خاصية details من نوع T

أنشئ الكائنات التالية باستخدام الواجهة العامة الخاصة بك:

bookItem من نوع InventoryItem<{ title: string; author: string }> مع:
- id: 1
- quantity: 5
- details: { title: "TypeScript Guide", author: "John Doe" }
electronicItem من نوع InventoryItem<{ brand: string; model: string }> مع:
- id: 2
- quantity: 3
- details: { brand: "TechCorp", model: "X200" }
clothingItem من نوع InventoryItem<{ size: string; color: string }> مع:
- id: 3
- quantity: 10
- details: { size: "M", color: "Blue" }

قم بطباعة المخرجات التالية:

اطبع bookItem.id
اطبع bookItem.quantity
اطبع bookItem.details.title
اطبع bookItem.details.author
اطبع electronicItem.details.brand
اطبع electronicItem.details.model
اطبع clothingItem.details.size
اطبع clothingItem.details.color

جرّب بنفسك

// TODO: اكتب كودك هنا
// أنشئ واجهة InventoryItem والكائنات المطلوبة

// اطبع المخرجات المطلوبة
console.log(bookItem.id);
console.log(bookItem.quantity);
console.log(bookItem.details.title);
console.log(bookItem.details.author);
console.log(electronicItem.details.brand);
console.log(electronicItem.details.model);
console.log(clothingItem.details.size);
console.log(clothingItem.details.color);