الفرق بين interface و type في TypeScript ومتى تستخدم كلًا منهما

في وصف شكل الكائن يؤدي interface وtype المهمة نفسها، ويمكن إسناد قيم أحدهما إلى الآخر عندما تتطابق الأشكال. الفروق عند الأطراف: يستطيع type تسمية أشياء لا تستطيعها الواجهة (union وtuples والأنواع المحسوبة)، وتستطيع الواجهة فعل بعض الأشياء التي لا يستطيعها type alias (الدمج، وextends المفحوص).

interface PointI {
  x: number;
  y: number;
}

type PointT = {
  x: number;
  y: number;
};

const a: PointI = { x: 1, y: 2 };
const b: PointT = a; // same shape, so they are interchangeable
const c: PointI = b;

function show(p: PointI): string {
  return `(${p.x}, ${p.y})`;
}

console.log(show(b), show(c)); // (1, 2) (1, 2)

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

جدول المقارنة

ما لا يستطيعه إلا type

كل ما ليس شكل كائن واحد يحتاج إلى type alias:

type Status = "idle" | "loading" | "done";                   // union of literals
type Coordinates = [lat: number, lng: number];               // tuple
type Handler = (event: string) => void;                      // function type
type ID = string | number;                                   // union of primitives
type Flags<T> = { [K in keyof T]: boolean };                 // mapped type
type ElementOf<T> = T extends readonly (infer U)[] ? U : T;  // conditional type

const current: Status = "loading";
const here: Coordinates = [51.5, -0.12];
const onSave: Handler = (e) => console.log("saved:", e);
const flags: Flags<{ dark: string; beta: number }> = { dark: true, beta: false };
const first: ElementOf<string[]> = "a";

onSave(current);
console.log(here, flags, first);
// saved: loading
// [ 51.5, -0.12 ] { dark: true, beta: false } a

لا يمكن كتابة أي من هذه بـ interface (الأخيران مشروحان في mapped types والأنواع الشرطية). وهذا هو السبب العملي لاستخدام كل قاعدة كود type في مكان ما، أيًا كان ما تستخدمه لأشكال الكائنات.

ما لا تستطيعه إلا interface: دمج التصريحات

تصريحان interface بالاسم نفسه في النطاق نفسه يندمجان في واحد. أما تصريحان type بالاسم نفسه فهما الخطأ TS2300، Duplicate identifier.

interface Settings {
  theme: string;
}
interface Settings {
  fontSize: number;
}
const s: Settings = { theme: "dark", fontSize: 14 }; // needs both

type Options = { a: number };
type Options = { b: number }; // error TS2300: Duplicate identifier 'Options'.

الدمج هو طريقة توسيع أنواع المكتبات من الخارج: إضافة خاصية إلى Window العام، أو إلى Request في Express، أو إلى نوع السمة في مكتبة ما. إذا كنت تنشر أنواعًا قد يحتاج المستخدمون إلى توسيعها، فاستخدم الواجهات. وفي كود تطبيقك، يحدث الدمج غير المقصود (ملفا سكربت يعلنان اسم الواجهة العامة نفسه) بصمت ما لم يعلن الاثنان الخاصية نفسها بأنواع مختلفة، وهذه إحدى الحجج التي تقدمها بعض الفرق لتفضيل type.

extends مقابل Intersection

توسّع الواجهة بـ extends، ويوسّع type alias بـ &. ينتجان النتيجة نفسها في الغالب، لكنهما يتعاملان مع الخاصية المتعارضة بشكل مختلف. يبلّغ extends عن التعارض عند التصريح:

// This does not compile: id cannot change from string to number
interface Base {
  id: string;
  name: string;
}

interface Broken extends Base {
  id: number;
}

const x: Broken = { id: 1, name: "a" };
console.log(x);

index.ts(7,11): error TS2430: Interface 'Broken' incorrectly extends interface 'Base'.
  Types of property 'id' are incompatible.
    Type 'number' is not assignable to type 'string'.

أما الـ intersection فيقبل التعارض نفسه بصمت ويحوّل الخاصية إلى never (نص هو رقم في الوقت نفسه). ولا يظهر الخطأ إلا لاحقًا، عندما تحاول إنشاء قيمة:

type Base = { id: string; name: string };
type Broken = Base & { id: number }; // no error here

// id is string & number, which is never: no object can satisfy Broken
// @ts-expect-error: Type 'number' is not assignable to type 'never'.
const x: Broken = { id: 1, name: "a" };

console.log("the alias compiled; only using it failed");

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

Index Signatures: فرق يسهل إغفاله

يحصل type alias لنوع كائن على index signature ضمني، لذلك يمكن تمريره حيث يُتوقع Record<string, unknown>. أما الواجهة فلا. هذا مقصود: شرح فريق TypeScript (المسألة #15300 في مستودع TypeScript) هو أن الواجهة يمكن توسيعها بتصريحات لاحقة، فاستنتاج index signature لها أقل أمانًا، وتغيير القاعدة الآن سيكسر كودًا كثيرًا.

interface UserI { name: string; age: number }
type UserT = { name: string; age: number };

function logFields(fields: Record<string, unknown>) {
  for (const [key, value] of Object.entries(fields)) {
    console.log(`${key}=${String(value)}`);
  }
}

const t: UserT = { name: "Ada", age: 36 };
const i: UserI = { name: "Alan", age: 41 };

logFields(t); // fine

// @ts-expect-error: Index signature for type 'string' is missing in type 'UserI'.
logFields(i);

logFields({ ...i }); // a spread copy is a fresh object type, so it is accepted

الاستدعاء المعلّم بـ @ts-expect-error يعمل رغم ذلك ويطبع حقول Alan: القاعدة وقت الترجمة. وهذا هو السبب المعتاد لخطأ محيّر عندما تُمرَّر قيمة واجهة إلى دالة مساعدة للتسجيل أو التسلسل أو الاستعلام نوع معاملها Record<string, ...>. حوّل ذلك التصريح الواحد إلى type، أو انشر القيمة، أو حدد نوع معامل الدالة المساعدة بواجهة أو بنوع عام بدلًا من ذلك.

الأداء ورسائل الأخطاء

تقترح صفحة الأداء في wiki الخاص بـ TypeScript (قسم «Preferring Interfaces Over Intersections») استخدام interface Foo extends Bar, Baz { ... } بدل type Foo = Bar & Baz & { ... } عند تركيب أنواع الكائنات. وأسبابها: الواجهة نوع كائن واحد مسطح يكتشف تعارضات الخصائص، والعلاقات بين الواجهات تُخزَّن مؤقتًا (أما intersections ككل فلا)، وفحص قيمة مقابل intersection يفحص كل مكوّن قبل النوع المسطح. يهم الفرق في قواعد الكود الكبيرة ذات الأنواع المركبة الكثيرة؛ أما مع بضعة أشكال كائنات عادية فلن تقيسه.

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

أيهما تستخدم

قاعدة تعمل:

1. أشكال الكائنات: interface. تعطيك extends مفحوصًا، وأخطاء أوضح في التركيبات الكبيرة، وتتيح لمستخدمي المكتبة توسيعها. وهذا يطابق القاعدة العملية في دليل TypeScript: «استخدم interface حتى تحتاج إلى ميزات من type».
2. كل ما عدا ذلك: type. union وtuples وأنواع الدوال والأنواع الحرفية، وكل ما يُبنى بـ mapped types أو الأنواع الشرطية أو template literal types.
3. الاستثناء: استخدم type لشكل كائن يجب أن يناسب معاملات Record<string, ...>، أو عندما تريد عمدًا منع الدمج.

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