extends in TypeScript: estendere un'interfaccia o un tipo

interface Child extends Parent crea una nuova interfaccia con tutti i membri di Parent più i suoi. I valori del tipo figlio si possono usare ovunque sia atteso il genitore, perché hanno tutte le sue proprietà.

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

La stessa parola chiave compare in quattro punti di TypeScript, con significati collegati ma diversi:

Estendere più interfacce

Elenca più genitori dopo extends, separati da virgole. Il risultato ha i membri di tutti:

interface Identified {
  id: number;
}

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

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

// Post requires id, createdAt, updatedAt and title

Se due genitori dichiarano la stessa proprietà con tipi non identici, la figlia dà l'errore TS2320 (Interface 'Post' cannot simultaneously extend types 'A' and 'B'), a meno che la figlia non dichiari di nuovo quella proprietà con un tipo assegnabile a entrambi.

Estendere un alias di tipo

Un alias type non ha la clausola extends. Ci costruisci sopra con un'intersezione, &, che combina i membri dei due lati. Un'interfaccia può anche estendere direttamente un alias di tipo oggetto, e un alias di tipo può intersecarsi con un'interfaccia: i due costrutti si mescolano senza problemi.

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

Le due strade si comportano allo stesso modo finché le proprietà non vanno in conflitto: extends segnala la proprietà in conflitto nella dichiarazione, mentre & la trasforma in never senza avvisare. Il confronto è nella pagina su interface e type, e i dettagli di & sono nella pagina sui tipi intersezione.

Ridefinire i tipi delle proprietà

Un'interfaccia figlia può dichiarare di nuovo una proprietà del genitore, ma solo con un tipo assegnabile a quello del genitore. Restringere string a un letterale, o togliere null da un'unione, è consentito. Cambiare il tipo in qualcosa di non correlato no:

// 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'.

La regola esiste perché un Label si possa ancora usare ovunque sia atteso uno Shape. Se kind potesse essere un numero, il codice scritto per Shape che chiama shape.kind.toUpperCase() si romperebbe.

Sostituire proprietà con Omit

Quando ti serve davvero un tipo diverso per una proprietà ereditata, rimuovila prima dal genitore con Omit, poi dichiara quella nuova. Un caso comune è la conversione dei dati di un'API, dove id e date arrivano come stringhe:

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 }, quindi i nuovi id e createdAt non vanno in conflitto con nulla. Pick, Partial e gli altri utility types si possono estendere allo stesso modo.

extends con le classi

class Dog extends Animal è l'ereditarietà delle classi di JavaScript e, a differenza dell'extends delle interfacce, esiste a runtime: Dog riceve il costruttore, i campi e le implementazioni dei metodi di Animal, e new Dog(...) instanceof Animal è true. TypeScript aggiunge sopra dei controlli di tipo, come la parola chiave 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

Una classe può fare extends di una sola classe, ma può fare implements di un numero qualsiasi di interfacce. implements non copia nulla: controlla solo che la classe dichiari ciò che l'interfaccia richiede. super, i membri protetti e override sono spiegati in ereditarietà.

extends nei generics e nei conditional types

Dentro le parentesi angolari, extends è un vincolo. <T extends { length: number }> accetta qualsiasi argomento di tipo che abbia un length numerico e permette al corpo della funzione di usare .length. In un conditional type, T extends U ? X : Y chiede se T è assegnabile a 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

In entrambi i casi extends significa "è assegnabile a", la stessa relazione che controlla la forma delle interfacce. I vincoli sono spiegati a fondo in vincoli generici, e i test a livello di tipo in conditional types.