extends في TypeScript: توسيع interface أو type

ينشئ interface Child extends Parent واجهة جديدة فيها كل أعضاء Parent إضافة إلى أعضائها. ويمكن استخدام قيم النوع الابن حيثما يُتوقع الأب، لأنها تملك كل خصائصه.

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

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

const rex: Dog = {
  name: "Rex",
  age: 4,
  breed: "collie",
  bark() {
    return `${this.name} says woof`;
  },
};

function birthday(a: Animal): number {
  return a.age + 1;
}

console.log(rex.bark());    // Rex says woof
console.log(birthday(rex)); // 5: a Dog is also an Animal

تظهر الكلمة نفسها في أربعة مواضع في TypeScript، بمعانٍ متقاربة لكنها مختلفة:

توسيع عدة واجهات

اسرد عدة آباء بعد extends مفصولين بفواصل. يملك الناتج أعضاءها جميعًا:

interface Identified {
  id: number;
}

interface Timestamped {
  createdAt: Date;
  updatedAt: Date;
}

interface Post extends Identified, Timestamped {
  title: string;
}

// Post requires id, createdAt, updatedAt and title

إذا أعلن أبوان الخاصية نفسها بنوعين غير متطابقين، يكون الابن هو الخطأ TS2320 (Interface 'Post' cannot simultaneously extend types 'A' and 'B')، ما لم يُعد الابن تعريف تلك الخاصية بنوع قابل للإسناد إلى الاثنين.

توسيع type alias

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

type Timestamps = { createdAt: string; updatedAt: string };
type WithId = { id: number };

// type alias: extend with &
type Post = WithId & Timestamps & { title: string };

// interface: extends works on object type aliases too
interface Reply extends WithId, Timestamps {
  postId: number;
  body: string;
}

const post: Post = { id: 1, title: "Hello", createdAt: "2024-03-15", updatedAt: "2024-03-15" };
const reply: Reply = { id: 7, postId: 1, body: "Nice", createdAt: "2024-03-16", updatedAt: "2024-03-16" };

console.log(post.title, reply.body, reply.postId === post.id); // Hello Nice true

يتصرف الطريقان بالطريقة نفسها حتى تتعارض الخصائص: يبلّغ extends عن الخاصية المتعارضة عند التصريح، بينما يحوّلها & بصمت إلى never. المقارنة موجودة في صفحة interface مقابل type، وتفاصيل & في صفحة intersection types.

تجاوز أنواع الخصائص

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

// This does not compile: kind cannot become a number
interface Shape {
  kind: string;
  color: string | null;
}

interface Circle extends Shape {
  kind: "circle"; // narrower than string: allowed
  color: string;  // narrower than string | null: allowed
  radius: number;
}

interface Label extends Shape {
  kind: number;   // not assignable to string: error
}

const c: Circle = { kind: "circle", color: "red", radius: 2 };
console.log(c);

index.ts(13,11): error TS2430: Interface 'Label' incorrectly extends interface 'Shape'.
  Types of property 'kind' are incompatible.
    Type 'number' is not assignable to type 'string'.

توجد القاعدة حتى يظل ممكنًا استخدام Label في كل مكان يُتوقع فيه Shape. لو كان kind يمكن أن يكون رقمًا، لتعطل كود مكتوب لـ Shape يستدعي shape.kind.toUpperCase().

استبدال الخصائص باستخدام Omit

عندما تحتاج فعلًا إلى نوع مختلف لخاصية موروثة، احذفها من الأب أولًا بـ Omit، ثم أعلن الخاصية الجديدة. حالة شائعة هي تحويل بيانات API، حيث تصل المعرّفات والتواريخ كنصوص:

interface ApiUser {
  id: string; // the API sends ids as strings
  name: string;
  createdAt: string;
}

// Drop the properties to change, then declare them again
interface User extends Omit<ApiUser, "id" | "createdAt"> {
  id: number;
  createdAt: Date;
}

function toUser(raw: ApiUser): User {
  return { ...raw, id: Number(raw.id), createdAt: new Date(raw.createdAt) };
}

const u = toUser({ id: "42", name: "Ada", createdAt: "2024-03-15T10:30:00Z" });
console.log(u.id + 1, u.createdAt.toISOString()); // 43 2024-03-15T10:30:00.000Z

Omit<ApiUser, "id" | "createdAt"> هو { name: string }، لذلك لا تتعارض id وcreatedAt الجديدتان مع أي شيء. ويمكن توسيع Pick وPartial وبقية أنواع الأدوات بالطريقة نفسها.

extends مع الأصناف

class Dog extends Animal هو وراثة الأصناف في JavaScript، وعلى خلاف extends في الواجهات فهو موجود وقت التشغيل: يحصل Dog على مُنشئ Animal وحقوله وتطبيقات دواله، ويكون new Dog(...) instanceof Animal مساويًا لـ true. وتضيف TypeScript فحوص أنواع فوق ذلك، مثل الكلمة المفتاحية override:

class Animal {
  constructor(public name: string) {}
  speak(): string {
    return `${this.name} makes a sound`;
  }
}

class Dog extends Animal {
  override speak(): string {
    return `${this.name} barks`;
  }
}

const pets: Animal[] = [new Animal("Generic"), new Dog("Rex")];
for (const p of pets) console.log(p.speak());
// Generic makes a sound
// Rex barks

يستطيع الصنف أن يوسّع (extends) صنفًا واحدًا فقط، لكنه يستطيع أن يطبّق (implements) أي عدد من الواجهات. لا ينسخ implements شيئًا: يتحقق فقط من أن الصنف يعلن ما تتطلبه الواجهة. super والأعضاء المحمية وoverride مشروحة في الوراثة.

extends في الأنواع العامة والأنواع الشرطية

داخل الأقواس الزاوية، extends قيد. يقبل <T extends { length: number }> أي وسيط نوع يملك length رقمية، ويتيح لجسم الدالة استخدام .length. وفي النوع الشرطي، يسأل T extends U ? X : Y هل T قابل للإسناد إلى U.

// Generic constraint: T must have a length property
function longest<T extends { length: number }>(a: T, b: T): T {
  return a.length >= b.length ? a : b;
}

console.log(longest("apple", "fig"));    // apple
console.log(longest([1, 2], [1, 2, 3])); // [ 1, 2, 3 ]

// @ts-expect-error: Argument of type 'number' is not assignable to parameter of type '{ length: number; }'.
longest(10, 20);

// Conditional type: a type-level if/else
type IsString<T> = T extends string ? "yes" : "no";
const a: IsString<"hi"> = "yes";
const b: IsString<42> = "no";
console.log(a, b); // yes no

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