إضافة الدوال (Methods) إلى الواجهات

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

تتيح لك واجهات TypeScript تعريف هذه السلوكيات من خلال تضمين تواقيع الأساليب إلى جانب تعريفات الخصائص.

تحدّد signature الخاصة بأسلوب في interface اسم الأسلوب ومعلماته ونوع القيمة التي يعيدها، من دون توفير التنفيذ الفعلي. وهذا ينشئ عقدًا يجب على أي كائن متوافق مع interface الوفاء به:

interface Person {
  name: string;
  age: number;
  greet(): string;  // توقيع الطريقة
}

let user: Person = {
  name: "Alice",
  age: 30,
  greet() {
    return `Hello, I'm ${this.name}`;
  }
};

تخبر توقيعة الطريقة greet(): string TypeScript بأن أي كائن ينفّذ الواجهة Person يجب أن يحتوي على طريقة greet لا تتلقى أي معلمات وتُرجع قيمة من النوع string. يمكن أن يختلف التنفيذ الفعلي بين الكائنات المختلفة، لكن يجب أن تتطابق التوقيعة تمامًا.

التحدي

سهل

أنشئ interface باسم Calculator بالخصائص وmethods التالية:

brand من type string
model من type string
isScientific من type boolean
method باسم add يأخذ معاملين من type number ويُرجع قيمة من type number
method باسم getInfo لا يأخذ أي معاملات ويُرجع قيمة من type string

أنشئ interface باسم BankAccount بالخصائص وmethods التالية:

accountNumber من type string
balance من type number
isActive من type boolean
method باسم deposit يأخذ معاملًا من type number ويُرجع void
method باسم getBalance لا يأخذ أي معاملات ويُرجع قيمة من type number

باستخدام interfaces الخاصة بك، أنشئ variables التالية:

أنشئ variable باسم myCalculator من type Calculator، بقيمة brand هي "Casio"، وmodel هي "FX-991EX"، وisScientific بقيمة true، وmethod باسم add يُرجع مجموع معامليه، وmethod باسم getInfo يُرجع "[brand] [model]"
أنشئ variable باسم savingsAccount من type BankAccount، بقيمة accountNumber هي "SAV-12345"، وbalance بقيمة 1500، وisActive بقيمة true، وmethod باسم deposit يضيف المعامل إلى balance، وmethod باسم getBalance يُرجع balance الحالية

اطبع outputs التالية في أسطر منفصلة:

استدعِ method getInfo على myCalculator واطبع النتيجة
استدعِ method add على myCalculator بالمعاملين 15 و27، واطبع النتيجة
استدعِ method getBalance على savingsAccount واطبع النتيجة
استدعِ method deposit على savingsAccount بالمعامل 250
استدعِ method getBalance على savingsAccount مرة أخرى واطبع النتيجة
اطبع property isScientific الخاصة بـ myCalculator

جرّب بنفسك

// TODO: اكتب الكود الخاص بك هنا
// أنشئ واجهة Calculator بالخصائص والطرق المطلوبة
// أنشئ واجهة BankAccount بالخصائص والطرق المطلوبة
// أنشئ المتغير myCalculator من نوع Calculator
// أنشئ المتغير savingsAccount من نوع BankAccount
// اطبع جميع المخرجات المطلوبة