extends в TypeScript: расширение интерфейса или типа

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 нет конструкции extends. Надстраивать его можно пересечением &, которое объединяет члены обеих сторон. Интерфейс тоже может напрямую расширять псевдоним объектного типа, а псевдоним типа может пересекаться с интерфейсом: эти два вида свободно смешиваются.

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, а подробности про & на странице о типах пересечения.

Переопределение типов свойств

Интерфейс-потомок может переобъявить свойство родителя, но только с типом, который присваивается типу родителя. Сузить string до литерала или убрать null из объединения можно. Изменить тип на несвязанный нельзя:

// 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 означает «присваивается в», то же отношение, которое проверяет форма для интерфейсов. Ограничения подробно разобраны в разделе ограничения дженериков, а проверки на уровне типов в разделе условные типы.