تخطي إلى المحتوى الرئيسي

الواجهات (Interfaces) في TypeScript

23 دقيقة قراءة
الواجهات (Interfaces) في TypeScript

مقدمة عن الواجهات (Interfaces) في TypeScript

في عالم تطوير البرمجيات الحديث، وخاصة عند بناء تطبيقات معقدة وقابلة للتوسع، تبرز الحاجة الماسة إلى أدوات تضمن تنظيم الكود وتحقيق الأمان النوعي الصارم (Type Safety).

أنواع الواجهات (Interface Types)

واجهة الخصائص البحتة (Strict Interface Type)

في واجهة الخصائص البحتة، يجب تعريف جميع الخصائص التي تعلن عنها الواجهة بشكل صريح. هذه الواجهة تحتوي فقط على خصائص ولا تحتوي على تنفيذ أو طرق. مثال على واجهة بخصائص بحتة:

interface MyStrictInterface {
  property1: string;
  property2: number;
};

واجهة الخصائص والطرق (Interface with Properties and Methods Type)

في هذه الواجهة، يمكننا تعريف الخصائص والطرق. يجب توفير تنفيذ للطرق وكذلك تعريف الخصائص بشكل صريح. مثال على واجهة بخصائص وطرق:

interface MyInterface {
  method1(): void;
  property1: string;
  property2: number;
};

واجهة الخصائص والطرق البحتة (Strict Interface with Properties and Methods Type)

تعتبر واجهة الخصائص والطرق البحتة مشابهة لواجهة الخصائص البحتة، لكن يجب تعريف جميع الطرق بشكل صريح ولا يمكن ترك الطرق بدون تنفيذ. مثال على واجهة الخصائص والطرق البحتة:

interface MyStrictInterfaceWithMethods {
  method1(): void;
  method2(): void;
  property1: string;
  property2: number;
};

واجهة الخصائص والطرق والطرق البحتة (Interface with Methods and Pure Methods Type)

في هذه الواجهة، يمكننا تعريف الخصائص والطرق البحتة بدون تنفيذ. مثال على واجهة الخصائص والطرق والطرق البحتة:

interface MyInterfaceWithPureMethods {
  method1(): void;
  method2(): void;
  property1: string;
  property2: number;

  // الطرق البحتة (Methods without Implementation)
  pureMethod1(): void;
  pureMethod2(): void;
};

استخدام الواجهات (Using Interfaces)

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

خلاصة الواجهة (Interface Summary)

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

إنشاء الواجهات (Creating Interfaces)

بعد أن تعرفنا على مفهوم الواجهات وأهميتها البالغة في بناء تطبيقات TypeScript قوية ومرنة، حان الوقت الآن للانتقال إلى الجانب العملي: كيفية إنشاء واجهة جديدة وتحديد العقد الذي ستمثله. إن فهم هذه الخطوات الأساسية هو حجر الزاوية في استغلال القدرات الكاملة للواجهات في مشروعك، مما يضمن التناسق، قابلية الصيانة، والتحقق من الأنواع على مستوى الكومبايلر.

تُعد الواجهة بمثابة مخطط تفصيلي أو “عقد” يحدد الهيكل الذي يجب أن تلتزم به الكائنات. هذا العقد لا يهتم بكيفية تنفيذ الكائن لمتطلبات الواجهة، بل يهتم فقط بـ “ماذا” يجب أن يوفره الكائن من خصائص ودوال. دعونا نتعمق في كيفية صياغة هذه العقود.

البنية الأساسية لإنشاء الواجهة

لإنشاء واجهة في TypeScript، نستخدم الكلمة المفتاحية interface، متبوعة باسم الواجهة، ثم كتلة من الخصائص والدوال المحاطة بأقواس معقوفة {}. يجب أن يكون اسم الواجهة عادةً بأسلوب PascalCase (مثل MyInterface) لتمييزها عن المتغيرات والدوال. إليك أبسط شكل لواجهة:

interface Point {
  x: number;
  y: number;
}
// الآن، أي كائن يمثل نقطة يجب أن يحتوي على هذه الخصائص
const point: Point = { x: 10, y: 20 };

استخدام الواجهات (Using Interfaces) في TypeScript

تعريف الواجهات واستخداماتها

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

تعريف الواجهات

لإنشاء واجهة، نستخدم الكلمة الأساسية “interface” متبوعة بأسماء الخصائص والسلوكيات التي نريد تحديدها. على سبيل المثال، لنقم بإنشاء واجهة تسمى “Animal” لتعريف الخصائص والسلوكيات المشتركة بين الحيوانات:

interface Animal {
  name: string;
  makeSound(): void;
}

في هذا المثال، قمنا بتعريف واجهة تسمى “Animal” تحتوي على خاصية “name” من نوع سلسلة نصية وسلوك “makeSound” الذي لا يأخذ أي معاملات ويرجع بلا قيمة.

استخدام الواجهات

بعد تعريف الواجهة، يمكننا استخدامها لتعريف أنواع جديدة أو تحسين الأنواع الموجودة. على سبيل المثال، لنقم بتعريف نوع جديد يسمى “Dog” يتوافق مع واجهة “Animal”:

class Dog implements Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  makeSound(): void {
    console.log("Woof!");
  }
}

في هذا المثال، قمنا بتعريف صنف “Dog” ينفذ واجهة “Animal”. هذا يعني أن صنف “Dog” يجب أن يمتلك خاصية “name”، ويمكنه استدعاء سلوك “makeSound” لتسجيل النباح.

توافق الأنواع مع الواجهات

لضمان توافق الأنواع مع الواجهات، يمكننا استخدام كلمة “implements” بعد تعريف الواجهة:

class Dog implements Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  makeSound(): void {
    console.log("Woof!");
  }
}

في هذا المثال، تم استخدام كلمة “implements” بعد تعريف الواجهة لضمان توافق صنف “Dog” مع واجهة “Animal”. هذا يضمن أن صنف “Dog” يمتلك خاصية “name” ويستدعي سلوك “makeSound” لتسجيل النباح.

استخدام الواجهات لتحديد الخصائص والسلوكيات

يمكننا استخدام الواجهات لتحديد الخصائص والسلوكيات المشتركة بين الأنواع المختلفة. هذا يعزز إعادة استخدام الكود ويجعل الكود أكثر تنظيمًا ووضوحًا. فيما يلي مثال على واجهة لتحديد خصائص وسلوكيات صنف “Animal”:

interface Animal {
  name: string;
  makeSound(): void;
}

class Dog implements Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  makeSound(): void {
    console.log("Woof!");
  }
}

في هذا المثال، قمنا بتعريف واجهة تسمى “Animal” تحتوي على خاصية “name” وسلوك “makeSound”. بعد ذلك، قمنا بتعريف صنف “Dog” ينفذ واجهة “Animal” لضمان امتلاكه لخصائص وسلوكيات واجهة “Animal”.

استخدام الواجهات لفرض قيود على الأنواع

استخدام الواجهات لفرض قيود على الأنواع يمكن أن يساهم في تحسين جودة الكود وتقليل الأخطاء المحتملة. في هذا القسم، سنشرح كيفية استخدام الواجهات لفرض قيود على الأنواع.

استنتاج

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

أمثلة تطبيقية

مثال 1: تعريف فئة Person وتنفيذها مع واجهة PersonInterface: في هذا المثال، سنستخدم واجهة لفرض قيود على الخصائص والسلوكيات الخاصة بفئة “Person”. سنشرح كيفية تطبيق الواجهة على الفئة والتأكد من تنفيذ الخصائص والسلوكيات المطلوبة.

مثال 2: استخدام الواجهات لتوحيد الأنواع: في هذا المثال، سنعرض كيفية استخدام الواجهات لتوحيد الأنواع وضمان التوافق بينها. سنتناول مثالاً توضيحياً لتوضيح استخدام الواجهات بشكل فعال.

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

مثال 4: استخدام الواجهات في مشاريع حقيقية: في هذا المثال، سنوضح كيفية استخدام الواجهات في مشاريع حقيقية وكيف تساهم الواجهات في تحسين جودة الكود وإعادة استخدام الكود.

استنتاج القسم

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

الرجوع إلى الأقسام السابقة

ننصحك بالرجوع إلى الأقسام السابقة لفهم المفاهيم الأساسية والتعرف على الواجهات بشكل عام.

مراجعة الملخص

في هذا الملخص، استعرضنا استخدام الواجهات في TypeScript وأهميتها في ضمان جودة الكود وإعادة استخدام الكود.

التمرين العملي

قم بتنفيذ التمارين العملية المقدمة لتحسين مهاراتك في استخدام الواجهات وفهم كيفية تطبيقها عمليًا. تأكد من مراجعة التمارين العملية المتعلقة بالأقسام السابقة قبل البدء بالتمارين الحالية.

مراجع المصادر الخارجية

لمزيد من المعرفة حول الواجهات وأنواع البيانات الأخرى في TypeScript، يمكنك مراجعة المصادر الخارجية الموصى بها.

استنتاج القسم ومراجعة الأقسام السابقة

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

استخدام الواجهات في TypeScript

استخدام الواجهات في TypeScript يساهم في تحسين جودة الكود وجعله أكثر ثباتًا ومرونة.

تعريف الخصائص والطرق في الواجهات (Defining Properties and Methods in Interfaces)

مقدمة

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

تعريف الخصائص (Defining Properties in Interfaces)

الخصائص هي المكونات الأساسية للواجهات وتستخدم لتحديد خصائص الكائن. لتعريف خاصية في الواجهة، نستخدم اسم الخاصية متبوعاً بنوعها. فيما يلي مثال على تعريف خاصية بسيطة:

interface MyInterface {
    myProperty: string;
}

في المثال السابق، نعرف واجهة تسمى “MyInterface” ونحدد خاصية تسمى “myProperty” من نوع “string”. يمكننا أيضاً تعريف خصائص من نوع بيانات أكثر تعقيداً مثل الكائنات والمصفوفات والقيم المنطقية. لنرى مثالاً على ذلك:

interface MyInterface {
    myProperty1: number[];
    myProperty2: {
        property1: boolean;
        property2: boolean;
    };
}

في المثال السابق، نعرف واجهة أخرى تسمى “MyInterface” ونحدد خصائص أكثر تعقيداً. الخاصية “myProperty1” هي مصفوفة من الأعداد الصحيحة، بينما الخاصية “myProperty2” هي كائن يحتوي على خاصيتين هما “property1″ و”property2” من نوع القيم المنطقية.

تعريف الطرق (Defining Methods in Interfaces)

بعد تعريف الخصائص في الواجهات، يمكننا أيضاً تعريف الطرق. الطرق تعتبر وظائف يمكن استدعاؤها على الكائنات التي تنفذ الواجهة. لتعريف طريقة في الواجهة، نحدد اسم الطريقة والبارامترات ونوع العائد. لنرى مثالاً على ذلك:

interface MyInterface {
    myMethod(param1: number, param2: string): void;
}

في المثال السابق، نعرف واجهة جديدة تسمى “MyInterface” ونحدد طريقة تسمى “myMethod”. تأخذ هذه الطريقة معاملين من نوع العدد الصحيح والسلسلة النصية وتعيد القيمة الفارغة (void).

استخدام الواجهات (Using Interfaces)

بعد تعريف الواجهات والطرق المرتبطة بها، يمكننا استخدامها لتعريف الأنواع وضمان التوافق بين الأنواع المختلفة. في هذا الجزء، سنتعرف على كيفية استخدام الواجهات وتحديد الأنواع داخل الواجهة. سنتناول الأمثلة العملية لتوضيح مفهوم الواجهات وتطبيقها بشكل صحيح.

استنتاج

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

مراجع مفيدة

إذا كنت ترغب في تعميق معرفتك بالواجهات وفهم أعمق لمفاهيمها، يمكنك قراءة المراجع التالية:

  • مقالة تعريف الواجهات (Interfaces) في TypeScript
  • دليل التعامل مع الواجهات والأنواع المتقدمة في TypeScript

مراجع إضافية

بالإضافة إلى المراجع المذكورة سابقاً، يمكنك قراءة المراجع التالية لتعميق فهمك للواجهات:

  • توثيق TypeScript الرسمي للواجهات
  • أفضل الممارسات لتصميم الواجهات في المشاريع الكبرى

مثال عملي لتطبيق الواجهات

class MyClass implements MyInterface {
    myProperty1: number[] = [1, 2, 3];
    myProperty2 = {
        property1: true,
        property2: false
    };

    myMethod(param1: number, param2: string): void {
        console.log(`Param1: ${param1}, Param2: ${param2}`);
    }
}

استنتاج

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

استخدام الواجهات في تعريف الأنواع | TypeScript

استخدام الواجهات في تعريف الأنواع (Using Interfaces in Type Definition)

مقدمة

في هذا القسم، سنتعرف على كيفية استخدام الواجهات في تعريف الأنواع والتأكد من توافق الأنواع مع الواجهات المطلوبة.

لماذا نحتاج إلى الواجهات في تعريف الأنواع؟

الواجهات تعتبر جزءاً أساسياً من تطوير البرمجيات المتوافقة والمُدارة. عندما نريد تعريف نوع جديد أو تحديد نوع موجود، يمكننا استخدام الواجهات لتحديد الخصائص والسلوكيات المطلوبة.

خطوات تعريف الواجهات

  • حدد الخصائص المطلوبة: استخدم الكلمة المفتاحية “interface” تليها اسم الواجهة:
// مثال على تعريف واجهة بسيطة
interface MyInterface {
    prop1: string;
    prop2: number;
    prop3: boolean;
}

في هذا المثال البسيط، قمنا بتعريف واجهة تسمى “MyInterface” بثلاثة خصائص:

  • prop1 من نوع string
  • prop2 من نوع number
  • prop3 من نوع boolean

ويمكنك إضافة المزيد من الخصائص حسب الحاجة.

استخدم الخصائص في الأنواع المرتبطة:

// مثال على تعريف نوع مرتبط بواجهة
class MyClass implements MyInterface {
    prop1: string;
    prop2: number;
    prop3: boolean;

    constructor(prop1: string, prop2: number, prop3: boolean) {
        this.prop1 = prop1;
        this.prop2 = prop2;
        this.prop3 = prop3;
    }
}

في هذا المثال، قمنا بتعريف فئة تسمى “MyClass” ونفذنا الخصائص المطلوبة من الواجهة MyInterface.

استخدم الواجهات للتحقق من التوافق بين الأنواع:

// مثال للتحقق من التوافق بين نوع وكائن
let obj: MyClass = new MyClass("قيمة", 100, true);
if (obj instanceof MyClass) {
    console.log("الكائن يطابق الصنف");
} else {
    console.log("التعامل مع النوع غير المتوافق");
}

في هذا المثال، نستخدم الواجهة MyInterface للتحقق من التوافق بين نوع وكائن.

استخدام الواجهات في TypeScript: مثال عملي

// مثال عملي على استخدام الواجهات في TypeScript
class MyClass implements MyInterface {
    prop1: string;
    prop2: number;
    prop3: boolean;

    constructor(prop1: string, prop2: number, prop3: boolean) {
        this.prop1 = prop1;
        this.prop2 = prop2;
        this.prop3 = prop3;
    }
}

// إنشاء كائن من نوع متوافق مع الواجهة
let obj: MyClass = new MyClass("test", 123, true);

// التحقق من التوافق مع الواجهة
if (obj instanceof MyClass) {
    console.log("تم التحقق بنجاح");
} else {
    console.log("التعامل مع النوع غير المتوافق");
}

في هذا المثال العملي، سنرى كيفية استخدام الواجهات في TypeScript وتطبيقها على مثال بسيط.

استخدام الواجهات في التحقق من النوع (Type Checking)

مقدمة

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

فهم الواجهات في TypeScript

في TypeScript، الواجهات هي نوع من أنواع التعابير التي تسمح بتعريف مجموعة من الخصائص والطرق التي يجب أن تتوفر في الأصناف أو القيم من نوع معين. تُستخدم الواجهات لتحديد مجموعة من الخصائص والطرق المطلوبة لضمان توافق القيم مع القواعد المحددة مسبقاً.

استخدام الواجهات في التحقق من النوع

للاستفادة من الواجهات في التحقق من النوع، يمكننا استخدام الكلمة الأساسية “interface” لتعريف الواجهة ومن ثم استخدامها مع الأصناف للتحقق من التوافق. لنأخذ مثالاً بسيطاً لتوضيح الفكرة:

interface MyInterface {
    prop1: string;
    prop2: number;
}

class MyClass implements MyInterface {
    prop1: string;
    prop2: number;
    constructor(prop1: string, prop2: number) {
        this.prop1 = prop1;
        this.prop2 = prop2;
    }
}

let obj: MyClass = new MyClass("value1", 123);
if (obj instanceof MyClass) {
    if (!(obj instanceof MyClass) || obj.prop1 !== "value1" || obj.prop2 !== 123) {
        console.log("Error: Object is not compatible with interface requirements");
    }
}

في هذا المثال، قمنا بتعريف واجهة تسمى “MyInterface” بمجموعة الخصائص المطلوبة. ثم قمنا بتعريف صنف “MyClass” الذي ينفذ هذه الواجهة ويستجيب للمتطلبات المحددة. بعد ذلك، نقوم بإنشاء كائن من صنف “MyClass” ونقوم بالتحقق من توافقه مع الواجهة المطلوبة باستخدام طريقة “instanceof” والتحقق من قيم الخصائص “prop1” و “prop2”. في حالة عدم التوافق، نقوم بتسجيل رسالة الخطأ.

استخدام الواجهات في التحقق من النوع والتحقق من القيم

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

استخدام الواجهات في التطبيقات العملية

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

interface MyInterface {
    prop1: string;
    prop2: number;
    prop3: boolean;
    method1(): void;
}

class MyClass implements MyInterface {
    prop1: string;
    prop2: number;
    prop3: boolean;

    constructor(prop1: string, prop2: number, prop3: boolean) {
        this.prop1 = prop1;
        this.prop2 = prop2;
        this.prop3 = prop3;
    }

    method1(): void {
        console.log("تنفيذ الطريقة");
    }
}

let obj: MyClass = new MyClass("value1", 123, true);
if (obj instanceof MyClass) {
    if (!(obj instanceof MyClass) || obj.prop1 !== "value1" || obj.prop2 !== 123 || obj.prop3 !== true) {
        console.log("Error: Object is not compatible with interface requirements");
    }
}

في هذا المثال، قمنا بتعريف واجهة “MyInterface” بمجموعة الخصائص والطرق المطلوبة. بعد ذلك، قمنا بتعريف صنف “MyClass” الذي ينفذ الواجهة ويقوم بتنفيذ الخصائص والطرق المحددة. قمنا بإنشاء كائن من صنف “MyClass” بقيم الخصائص والطرق المناسبة. أخيراً، نتحقق من توافق الكائن مع الواجهة المطلوبة ونقوم بتسجيل رسالة الخطأ في حالة عدم التوافق.

استخدام الواجهات في تطبيقات العالم الحقيقي

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

لنأخذ مثالاً على استخدام الواجهات في تطبيق حقيقي: واجهات المستخدم الرسومية (GUI). في واجهات المستخدم الرسومية، يمكننا تعريف مجموعة من الخصائص والطرق المطلوبة للتحكم بالواجهة والتأكد من توافق القيم مع الواجهة المحددة.

استخدام الواجهات في واجهات المستخدم الرسومية (GUI)

في واجهات المستخدم الرسومية، يمكن استخدام الواجهات لتحسين جودة الأكواد وتجنب الأخطاء المحتملة. على سبيل المثال، يمكننا تعريف واجهة لمجموعة من الخصائص والعمليات المطلوبة للتحكم بواجهة المستخدم الرسومية والتأكد من توافق القيم مع الواجهة المحددة.

استخدام الواجهات في التحقق من التوافق

يمكن استخدام الواجهات للتحقق من توافق القيم مع الخصائص والطرق المحددة مسبقاً والتأكد من أنها تلبي المتطلبات اللازمة. لنستخدم مثالاً توضيحياً للتحقق من التوافق:

interface MyInterface {
    prop1: string;
    prop2: number;
    prop3: boolean;
    method1(): boolean;
    method2(): number;
}

class MyClass implements MyInterface {
    prop1: string;
    prop2: number;
    prop3: boolean;

    constructor(prop1: string, prop2: number, prop3: boolean) {
        this.prop1 = prop1;
        this.prop2 = prop2;
        this.prop3 = prop3;
    }

    method1(): boolean {
        return this.prop3;
    }

    method2(): number {
        return this.prop2;
    }
}

let obj: MyClass = new MyClass("Value1", 123, true);
if (obj.prop1 !== "Value1" || obj.prop2 !== 123 || obj.prop3 !== true || obj.method1() !== true || obj.method2() !== 123) {
    console.log("Error: Object is not compatible with interface requirements");
}

في هذا المثال، قمنا بتعريف واجهة تسمى “MyInterface” بقائمة الخصائص والطرق المطلوبة. ثم قمنا بتعريف فئة “MyClass” التي تنفذ الواجهة وتنفذ الخصائص والطرق المحددة. بعد ذلك، نقوم بإنشاء كائن من فئة “MyClass” بقيم الخصائص والطرق المناسبة. نستخدم جملة التحقق من التوافق للتأكد من توافق الكائن مع متطلبات الواجهة.

الواجهات والتحقق من التوافق في تطبيقات العالم الحقيقي

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

استخدام الواجهات في الوراثة (Inheritance) في TypeScript

مقدمة

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

ما هي الوراثة في البرمجة الكائنية الموجهة (OOP)

الوراثة هي مفهوم في البرمجة الكائنية الموجهة (OOP) يتيح للفئة الفرعية (Subclass) توريث الخصائص والسلوكيات من الفئة الأم (Superclass). تعتبر الوراثة وسيلة لتنظيم الكود وإعادة استخدام الكود الموجود وتقليل التكرار في المشروع.

متى نستخدم الواجهات في الوراثة

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

توريث الواجهات

في TypeScript، يمكننا توريث الواجهات من خلال تعريف فئة جديدة تتضمن الخصائص والطرق الموجودة في الواجهة المراد توريثها. يعتبر توريث الواجهات مهمًا لضمان الالتزام بالعقود البرمجية وفرض المعايير.

توريث الخصائص والطرق من الواجهات

لنفترض أن لدينا واجهتين:

  • واجهة IUser
  • واجهة IAdmin

لنفترض أيضًا أن لدينا فئة User وفئة Admin تستورث من كلا الواجهتين:

class User implements IUser, IAdmin {
    //...
}

في هذا المثال، نستورد الواجهتين IUser و IAdmin ونقوم بتنفيذ كلا الواجهتين في فئة User.

توريث الطرق من الواجهات

عند توريث الواجهة، يمكننا توريث الطرق الموجودة داخل الواجهة. في المثال السابق، يمكننا إضافة طرق جديدة إلى فئة User:

class User implements IUser, IAdmin {
    // الطرق الموروثة من الواجهتين IUser و IAdmin
    method1() {
        // تنفيذ الطريقة الموروثة من واجهة IUser
    }

    method2() {
        // تنفيذ الطريقة الموروثة من واجهة IAdmin
    }

    // الطرق الجديدة الموروثة
    method3() {
        // تنفيذ طريقة جديدة
    }

    method4() {
        // تنفيذ طريقة جديدة
    }
}

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

متى نستخدم الواجهات في البرمجة الكائنية التوجه

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

استخدام الواجهات في TypeScript

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

استخدام الواجهات في تطوير التطبيقات

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

مثال عملي على استخدام الواجهات في TypeScript

لنفترض أن لدينا الواجهتين IUser و IAgent:

interface IUser {
    method1(): void;
    method2(): void;
    method3(): void;
}

interface IAgent {
    method4(): void;
    method5(): void;
    method6(): void;
}

يمكننا استخدام الواجهات في TypeScript لإنشاء واجهة مشتركة للفئات التي ترغب في توريثها. في هذا المثال العملي، لدينا الواجهتين IUser و IAgent:

تطبيق الواجهات في TypeScript

لنفترض أن لدينا الفئة User والفئة Agent التي ترث من الواجهتين IUser و IAgent:

class User implements IUser, IAgent {
    method1(): void {}
    method2(): void {}
    method3(): void {}
    method4(): void {}
    method5(): void {}
    method6(): void {}
}

class Agent implements IUser, IAgent {
    method1(): void {}
    method2(): void {}
    method3(): void {}
    method4(): void {}
    method5(): void {}
    method6(): void {}
    method7(): void {}
    method8(): void {}
    method9(): void {}
    method10(): void {}
}

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

استخدام الواجهات في الوراثة

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

خلاصة الواجهات في TypeScript

في TypeScript، تعتبر الواجهات أداة قوية لتنظيم الكود وضمان الامتثال لمتطلبات الواجهات الموروثة. يمكن استخدام الواجهات في الوراثة لتحسين الكود وتعزيز التوريث بين الفئات.

استخدام الواجهات في العقود (Contracts) في TypeScript

مقدمة

الواجهات (Interfaces) تعتبر أحد المفاهيم الهامة في لغة TypeScript، حيث تساعدنا على تعريف مجموعة من الخصائص والطرق التي يجب أن توفرها الأصناف (Classes) لتحقيق عقد معين. في هذا القسم، سنتعرف على كيفية استخدام الواجهات لتحديد العقود والتأكد من توافق الأنواع والقيم مع الواجهات المطلوبة.

تعريف العقود

العقد في البرمجة الكائنية التوجه (OOP) هو مجموعة من الخصائص والطرق التي يجب أن توفرها الصنف لتحقيق وظيفة معينة أو تلبية متطلبات محددة. الواجهات في TypeScript تساعدنا على تعريف هذه العقود والتأكد من توافق الأصناف مع هذه العقود.

استخدام الواجهات في العقود

لنفترض أننا نريد تطوير تطبيق ويب بسيط يعرض قائمة من الكتب ومعلوماتها. يمكننا استخدام الواجهات لتحديد الخصائص والطرق التي يجب أن توفرها الأصناف لتلبية متطلبات التطبيق. فيما يلي مثال على كيفية تعريف واجهة للكتب:

interface IBook {
  id: number;
  title: string;
  author: string;
  year: number;
  description: string;
}

في هذا المثال، قمنا بتعريف واجهة IBook التي تحتوي على الخصائص التالية:

  • id: رقم يمثل معرف الكتاب
  • title: عنوان الكتاب
  • author: اسم المؤلف
  • year: سنة النشر
  • description: وصف الكتاب

يمكننا الآن استخدام هذه الواجهة لتحديد الخصائص والطرق المطلوبة لكتاب في تطبيقنا. إليك مثال على صنف يمثل كتابًا:

class Book implements IBook {
  id: number;
  title: string;
  author: string;
  year: number;
  description: string;

  constructor(id: number, title: string, author: string, year: number, description: string) {
    this.id = id;
    this.title = title;
    this.author = author;
    this.year = year;
    this.description = description;
  }
}

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

استخدام الواجهات في العقود

في المثال السابق، قمنا بتعريف واجهة IBook وصنف Book الذي ينفذ هذه الواجهة. عندما نريد التأكد من توافق الأصناف مع الواجهات، يمكننا استخدام الواجهات لتحديد المتطلبات والمواصفات الخاصة بالأصناف. في هذا الدرس، تعرفنا على كيفية تعريف الواجهات واستخدام الأصناف التي تنفذ الواجهات لضمان التوافق مع العقد المحدد بواسطة الواجهات. من خلال استخدام الواجهات في العقود، يمكننا تحسين جودة الأكواد وضمان التوافق بين الأصناف ومتطلبات التطبيق. دعونا نستعرض مثالًا آخر لتوضيح مفهوم الواجهات والعقود بشكل أفضل.

مثال على الواجهات والعقود

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

واجهة الأصناف الإلكترونية للكتب

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

interface IBookElectronic {
    id: number;
    title: string;
    author: string;
    year: number;
    description: string;
}

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

أمثلة على الواجهات والعقود

لنفترض أننا نملك صنفًا إلكترونيًا للكتب يسمى BookElectronic، والذي يجب أن يتبع الخصائص المحددة في واجهة IBookElectronic. سيكون الصنف كما يلي:

class BookElectronic implements IBookElectronic {
    id: number;
    title: string;
    author: string;
    year: number;
    description: string;

    constructor(id: number, title: string, author: string, year: number, description: string) {
        this.id = id;
        this.title = title;
        this.author = author;
        this.year = year;
        this.description = description;
    }
}

تم تنفيذ واجهة IBookElectronic في صنف BookElectronic لضمان توافق الأنواع والقيم مع الواجهات المطلوبة. لفهم أكثر وضوحاً، سنطرح مثالًا عملياً لتوضيح المفاهيم المذكورة.

مثال عملي على الواجهات والعقود

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

class BookElectronicBook implements IBookElectronic {
    id: number;
    title: string;
    author: string;
    year: number;
    description: string;

    constructor(id: number, title: string, author: string, year: number, description: string) {
        this.id = id;
        this.title = title;
        this.author = author;
        this.year = year;
        this.description = description;
    }
}

يجب أن ينفذ صنف BookElectronicBook واجهة IBookElectronic لتوفير الخصائص المطلوبة وضمان توافق الأصناف والقيم مع المتطلبات المحددة. بذلك نكون قد تعرفنا على مفهوم الواجهات والعقود في TypeScript وتطبيقاتها العملية.

استخدام الواجهات والعقود في تطبيق إدارة المكتبة الإلكترونية

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

  • تعريف الواجهات: نعرف واجهة IBookElectronicLibrary التي تحتوي على خصائص إضافية لإدارة المكتبة الإلكترونية:
export interface IBookElectronicLibrary {
    getBookById(bookId: number): IBookElectronic | undefined;
    addBook(book: IBookElectronic): void;
}

استخدام الواجهات في الأصناف: سنستخدم صنف BookElectronicLibrary الذي يتبع واجهة IBookElectronicLibrary:

class BookElectronicLibrary implements IBookElectronicLibrary {
    private books: IBookElectronic[] = [];

    addBook(book: IBookElectronic): void {
        this.books.push(book);
        console.log(`تمت إضافة الكتاب: ${book.title}`);
    }

    getBookById(bookId: number): IBookElectronic | undefined {
        return this.books.find(b => b.id === bookId);
    }
}

اكتشاف المزيد من كود التطور

اشترك للحصول على أحدث التدوينات المرسلة إلى بريدك الإلكتروني.

الوسوم:

MOHAMMAD ABU KASHREEF

محمد، مهندس برمجيات وصانع محتوى تقني، مؤسس كود التطور. أشارك خبرتي في البرمجة والتقنية بأسلوب عملي وتجارب واقعية، بهدف تبسيط المعرفة وبناء محتوى عربي موثوق وقابل للتطبيق.

مقالات ذات صلة قد تهمك

اترك رد