TypeScript: Interfaces vs Types — ماذا تختار في 2024؟

مقدمة: الجدل الأبدي بين مطوري TypeScript

إذا كنت قد كتبت بلغة TypeScript ولو مرة واحدة، فبالتأكيد واجهت السؤال: "متى أستخدم interface ومتى أستخدم type؟" هذا السؤال حصد آلاف المشاهدات على Stack Overflow وأصبح حجر عثرة حقيقي للمبتدئين. دعنا نحسم هذا الجدل مرة وإلى الأبد.

TypeScript هي طبقة فوق JavaScript تضيف الكتابة الثابتة. ولدينا أداتان رئيسيتان لوصف بنية البيانات: Interface و Type Alias. للوهلة الأولى، يقومان بنفس الشيء، لكن الشيطان يكمن في التفاصيل. في هذه المقالة، لن نعدد الفروقات فقط - بل سنعرضها بأمثلة حقيقية ونقدم توصيات واضحة.

ما هو Interface؟

Interface هو وسيلة لوصف بنية الكائن. إنه مثل مخطط للبيانات: تخبر TypeScript بالخصائص والطرق التي يجب أن يمتلكها الكائن.

// واجهة أساسيةinterface User {    name: string;    age: number;    email?: string; // خاصية اختيارية    readonly id: number; // للقراءة فقط}

// الاستخدامconst user: User = {    name: "آنا",    age: 25,    id: 1};

يمكن للواجهات أن ترث من بعضها البعض، مما يجعلها مثالية لوصف التسلسلات الهرمية:

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

interface Dog extends Animal {    breed: string;    wagTail(): void;}

// الآن Dog تحتوي على جميع حقول Animal بالإضافة إلى حقولهاconst myDog: Dog = {    name: "ريكس",    breed: "راعي",    sound() { console.log("هاو!"); },    wagTail() { console.log("يهز ذيله"); }};

ما هو Type Alias؟

Type Alias (الاسم المستعار للنوع) هو أداة أكثر مرونة. يمكنه وصف ليس فقط الكائنات، بل أيضًا الأنواع البدائية، والاتحادات، والتقاطعات.

// نوع للبدائيtype ID = string | number;

// نوع للكائنtype UserType = {    name: string;    age: number;};

// نوع للدالةtype Greeting = (name: string) => string;

// Union Type (اتحاد)type Status = "active" | "inactive" | "pending";

// Intersection Type (تقاطع)type Person = { name: string };type Employee = Person & { salary: number };

القوة الخارقة الرئيسية للأنواع هي union types. الواجهات لا تستطيع فعل ذلك:

// ❌ لا يمكن مع interface// interface Status = "active" | "inactive"; // خطأ!

// ✅ أما مع type فسهل!type Status = "active" | "inactive" | "pending";

function processStatus(status: Status) {    switch (status) {        case "active":            console.log("نشط");            break;        case "inactive":            console.log("غير نشط");            break;        case "pending":            console.log("قيد الانتظار");            break;    }}

الفروقات الرئيسية: Interface vs Type

دعنا نفصل الاختلافات العملية بينهما.

1. الاتحاد والتقاطع بين الأنواع

Type يدعم union (|) و intersection (&) مباشرة. Interface فقط من خلال extends.

// Union — فقط مع typetype Success = { data: string };type Error = { error: string };type Result = Success | Error; // ممكن!

// Intersectiontype Full = Success & Error; // ممكن!

// بالنسبة لـ interface، يجب إنشاء واجهات منفصلةinterface IResult extends Success, Error {} // يعمل لكنه مرهق

2. Declaration merging (دمج التصريحات)

هذه ميزة فريدة للواجهات. إذا أعلنت واجهتين بنفس الاسم، فإن TypeScript يدمجهما.

// الواجهة الأولىinterface User {    name: string;}

// الواجهة الثانية بنفس الاسمinterface User {    age: number;}

// النتيجة: User = { name: string; age: number; }const user: User = {