مقدمة عن الواجهات (Interfaces)
جزء من قسم Introduction To TypeScript في رحلة JavaScript على Coddy. الدرس 39 من 73.
تؤدي interfaces الغرض الأساسي نفسه الذي تؤديه الأسماء المستعارة للأنواع للكائنات، لكنها تستخدم صياغة مختلفة وتوفر بعض الإمكانات الفريدة.
يتم التصريح عن الواجهة باستخدام الكلمة المفتاحية interface متبوعة باسم الواجهة وبنية الكائن بين أقواس معقوفة:
interface Animal {
name: string;
sound: string;
}
let dog: Animal = {
name: "Buddy",
sound: "Woof"
};إن بناء الجملة نظيف ومباشر — ما عليك سوى إدراج الخصائص وأنواعها داخل جسم interface. بعد تعريفها، يمكنك استخدام اسم interface كتعليق توضيحي للنوع في أي مكان في التعليمات البرمجية، تمامًا كما هو الحال مع الأسماء المستعارة للأنواع.
التحدي
سهلأنشئ واجهة باسم Pet بالخصائص التالية:
nameمن النوعstringspeciesمن النوعstringageمن النوعnumberisVaccinatedمن النوعboolean
أنشئ واجهة باسم Vehicle بالخصائص التالية:
makeمن النوعstringmodelمن النوعstringyearمن النوعnumber
باستخدام الواجهات الخاصة بك، أنشئ المتغيرات التالية:
- أنشئ متغيرًا باسم
myDogمن النوعPet، بحيث يكون الاسم"Buddy"، والنوع"Golden Retriever"، والعمر3، وisVaccinatedبقيمةtrue - أنشئ متغيرًا باسم
myCatمن النوعPet، بحيث يكون الاسم"Whiskers"، والنوع"Persian"، والعمر2، وisVaccinatedبقيمةfalse - أنشئ متغيرًا باسم
myCarمن النوعVehicle، بحيث تكون الشركة المصنّعة"Toyota"، والطراز"Camry"، والسنة2022
أنشئ دالة باسم describePet تقبل معلمة من النوع Pet وتُرجع قيمة من النوع string بالتنسيق "[name] is a [age]-year-old [species]".
أنشئ دالة باسم getVehicleInfo تقبل معلمة من النوع Vehicle وتُرجع قيمة من النوع string بالتنسيق "[year] [make] [model]".
اطبع المخرجات التالية في أسطر منفصلة:
- استدعِ
describePetباستخدامmyDogواطبع النتيجة - استدعِ
describePetباستخدامmyCatواطبع النتيجة - استدعِ
getVehicleInfoباستخدامmyCarواطبع النتيجة - اطبع حالة تطعيم
myDog(خاصيةisVaccinated)
جرّب بنفسك
// TODO: اكتب الكود الخاص بك هنا
// أنشئ واجهة Pet
// أنشئ واجهة Vehicle
// أنشئ المتغيرات باستخدام واجهاتك
// أنشئ الدالة describePet
// أنشئ الدالة getVehicleInfo
// اطبع المخرجات المطلوبةيتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس Introduction To TypeScript
1البداية مع TS
ما هي TypeScript؟لماذا نستخدم TypeScript؟أول كود TypeScript لكعملية الـ Compilation والأخطاءملخص: مقدمة في TS4التعامل مع الدوال
تحديد أنواع المعاملات وقيم الإرجاعتحديد أنواع Arrow Functionsنوع الإرجاع 'void'المعاملات الاختيارية باستخدام '?'القيم الافتراضية للمعاملاتتحديد أنواع Rest Parametersتعريف أنواع الدوالملخص: بناء دوال محددة الأنواع2الأنواع الأساسية
الأنواع الأساسية: str, num, booleanالنوع 'any': مخرج الهروبالنوع 'unknown'التعامل مع 'null' و 'undef'استنتاج الأنواع في التطبيق العمليتوضيحات الأنواع الصريحةمراجعة: تدريب على الأنواع الأساسية5الأنواع: الأسماء المستعارة، الاتحادات والتقاطعات
الأسماء المستعارة للأنواع الأساسية (Primitives)أنواع الاتحاد ('|')التعامل مع أنواع الاتحادالأنواع الحرفية (Literal Types)أنواع التقاطع ('&')دمج الأسماء المستعارة للأنواعملخص: تركيبات الأنواع المتقدمة3هياكل البيانات: المصفوفات و Tuple
المصفوفات محددة النوع (Typed Arrays)معدل 'readonly' للمصفوفاتما هو الـ Tuple؟تعريف والوصول إلى الـ Tuplesتفكيك الـ Tuples (Destructuring)الـ Tuples للقراءة فقط (Readonly)المصفوفات محددة النوع متعددة الأبعاداستخدام Spread Operator مع المصفوفاتملخص: المصفوفات و Tuples6تحديد أنواع الكائنات والواجهات
توصيف أنواع الكائنات المضمنة (Inline)الأسماء المستعارة للأنواع (Type Aliases) للكائناتمقدمة عن الواجهات (Interfaces)الواجهات (Interfaces) مقابل الأسماء المستعارة للأنواع (Type Aliases)الخصائص الاختيارية وخصائص القراءة فقط (Readonly)توسيع الواجهات والأنواعإضافة الدوال (Methods) إلى الواجهاتملخص: تحديد هياكل الكائناتتدرّب بنفسك: مترجم JavaScript عبر الإنترنت