مقدمة إلى واجهات TypeScript للمبتدئين

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

ما هي الواجهة؟

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

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

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

interface Person {
  name: string;
  age: number;
}

في هذا المثال، تحدد واجهة Person أن الكائن Person يجب أن يحتوي على name من نوع string وage من نوع number.

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

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

استخدام واجهة مع الكائنات

فيما يلي كيفية استخدام واجهة Person للتحقق من نوع الكائن:

const person: Person = {
  name: "Alice",
  age: 30
};

في هذا المثال، يلتزم الكائن person بواجهة Person، مما يضمن أنه يحتوي على name وage مع الأنواع الصحيحة.

استخدام الواجهات مع الوظائف

يمكن أيضًا استخدام الواجهات للتحقق من نوع معلمات الوظيفة وقيم الإرجاع:

function greet(person: Person): string {
  return `Hello, ${person.name}!`;
}

في هذا المثال، تقبل الدالة greet معلمة من نوع Person وترجع رسالة تحية.

خصائص اختيارية

يمكن أن تتضمن الواجهات خصائص اختيارية باستخدام المعدِّل ?. يشير هذا إلى أن الخاصية قد تكون موجودة أو غير موجودة:

interface Person {
  name: string;
  age: number;
  email?: string;
}

في هذا المثال، email عبارة عن خاصية اختيارية قد يتم تضمينها أو لا يتم تضمينها في كائن Person.

خصائص للقراءة فقط

يمكنك أيضًا تعريف الخصائص على أنها للقراءة فقط، مما يعني أنه لا يمكن تعديلها بعد التهيئة:

interface Person {
  readonly name: string;
  age: number;
}

في هذا المثال، الخاصية name هي للقراءة فقط ولا يمكن تغييرها بعد تعيينها.

توسيع الواجهات

يمكن للواجهات توسيع واجهات أخرى، مما يسمح لك بالبناء على الأشكال الموجودة:

interface Employee extends Person {
  employeeId: number;
}

في هذا المثال، تقوم واجهة Employee بتوسيع واجهة Person، وإضافة خاصية employeeId.

خاتمة

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