الكائنات والواجهات

صِف شكل كائناتك بأنواع دقيقة، ثم اجعلها قابلة لإعادة الاستخدام باستخدام الواجهات.

8 دقيقة · 3 أسئلة

في JavaScript، الكائن يجمع عدة معلومات مترابطة على هيئة أزواج مفتاح-قيمة، مثل بطاقة سجلّ: للكتاب عنوان وعدد صفحات. في TypeScript، يمكنك وصف الشكل الدقيق للكائن: أي خصائص يحتوي عليها وما نوع كل واحدة منها.

const book: { title: string; pages: number } = {
  title: "The Little Prince",
  pages: 96,
};

console.log(book.title); // "The Little Prince"

كتابة الشكل في كل مرة تصبح سريعًا مملّة بالتكرار. الواجهة (interface) تمنح ذلك الشكل اسمًا، بحيث يمكنك إعادة استخدامه في كل مكان. تُصرّح عنها بالكلمة المفتاحية interface، متبوعة باسم (بحرف كبير حسب العُرف)، ثم قائمة الخصائص وأنواعها.

interface Recipe {
  name: string;
  servings: number;
  isVegetarian: boolean;
}

const pancakes: Recipe = {
  name: "Pancakes",
  servings: 4,
  isVegetarian: true,
};

كل خصائص الواجهة مطلوبة افتراضيًا: نسيان servings سيسبّب خطأ. لجعل خاصية اختيارية، أضف علامة استفهام ? بعد اسمها مباشرة. يمكن حينها إنشاء الكائن مع تلك الخاصية أو بدونها.

interface Contact {
  name: string;
  phone: string;
  email?: string; // optional thanks to the ?
}

const alice: Contact = {
  name: "Alice",
  phone: "0601020304",
}; // allowed: email can be omitted

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. ما فائدة الواجهة في TypeScript؟
   • لوصف شكل كائن وإعادة استخدامه
   • لإنشاء صفحة ويب
   • لتشغيل دالة بشكل أسرع
   • لتخزين البيانات على خادم
2. ماذا تعني علامة الاستفهام في email?: string؟
   • الخاصية email مطلوبة
   • الخاصية email اختيارية
   • الخاصية email فارغة دائمًا
3. كائن من نوع Recipe تنقصه الخاصية name. ماذا يحدث؟
   • يُبلّغ TypeScript عن خطأ قبل التنفيذ
   • ينهار البرنامج دون تحذير أثناء التشغيل
   • يضيف TypeScript الخاصية تلقائيًا