Herencia en TypeScript: extends, super y override

Una clase de TypeScript hereda de otra con extends. La subclase obtiene todos los campos y métodos del padre, llama al constructor padre con super(...) y puede sobrescribir métodos, y TypeScript comprueba que cada sobrescritura siga siendo compatible con los tipos del padre.

class Animal {
    constructor(public name: string) {}

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

class Dog extends Animal {
    constructor(name: string, public breed: string) {
        super(name); // call the parent constructor first
    }

    override speak(): string {
        return `${super.speak()}: woof`; // call the parent method
    }
}

const rex = new Dog("Rex", "beagle");
console.log(rex.speak());          // Rex makes a sound: woof
console.log(rex);                  // Dog { name: 'Rex', breed: 'beagle' }
console.log(rex instanceof Animal); // true

Esto es la herencia de clases de JavaScript (consulta herencia en JavaScript para ver la cadena de prototipos que hay detrás). TypeScript añade las comprobaciones de tipos: un Dog se puede asignar en cualquier sitio donde se espere un Animal, y el compilador verifica la sobrescritura y la llamada a super.

Sobrescribir métodos

Un método de la subclase con el mismo nombre sustituye al del padre. Su tipo debe poder asignarse al del padre: parámetros iguales o compatibles, y un tipo de retorno igual o más estrecho. Si no, cualquier código que tenga un Animal podría llamar al método con argumentos que la subclase no sabe manejar.

class Formatter {
    format(value: number): string {
        return value.toString();
    }
}

class CurrencyFormatter extends Formatter {
    // Compatible: accepts more (number | bigint) and returns the same type.
    override format(value: number | bigint): string {
        return `$${value.toLocaleString("en-US")}`;
    }
}

const formatters: Formatter[] = [new Formatter(), new CurrencyFormatter()];
for (const f of formatters) console.log(f.format(1234567));
// 1234567
// $1,234,567

Cambiar el parámetro a value: string sería el error TS2416: Property 'format' in type 'CurrencyFormatter' is not assignable to the same property in base type 'Formatter'. El bucle muestra por qué: llama a format con un número en cada elemento, sin saber qué subclase tiene.

Hay un agujero. Los parámetros de los métodos se comparan de forma bivariante, así que una sobrescritura que acepta un tipo más estrecho, como format(value: 1 | 2), compila aunque el bucle podría seguir pasándole 1234567. Los tipos de retorno se comprueban de forma estricta: devolver number en lugar de string es TS2416.

La palabra clave override y noImplicitOverride

override dice «este miembro sustituye a uno de la clase base», y el compilador te lo exige. Si la base no tiene ese miembro (una errata, o un método que alguien renombró en el padre), es un error:

// This does not compile: the parent has no method called 'speek'.
class Animal {
    speak(): string {
        return "...";
    }
}

class Cat extends Animal {
    override speek(): string {
        return "meow";
    }
}

console.log(new Cat().speak());

index.ts(9,14): error TS4117: This member cannot have an 'override' modifier because it is not declared in the base class 'Animal'. Did you mean 'speak'?

Sin override, esa errata compila y speak() devuelve "..." sin avisar. La palabra clave solo ayuda donde se escribe, así que activa noImplicitOverride en tsconfig.json. Entonces cada método que sobrescribe un miembro de la base debe indicarlo, y un simple speak() en una subclase es el error TS4114 (This member must have an 'override' modifier because it overrides a member in the base class 'Animal').

{
    "compilerOptions": {
        "strict": true,
        "noImplicitOverride": true
    }
}

noImplicitOverride no forma parte de strict; tienes que añadirlo tú. override se borra del JavaScript compilado.

Miembros protected en las subclases

Los miembros private del padre son invisibles en la subclase. Los miembros protected son visibles, y esa es la razón de que exista protected: es la API que una clase padre ofrece a sus hijas.

class Counter {
    protected count = 0;
    private log: string[] = [];

    increment(): void {
        this.count++;
        this.log.push(`now ${this.count}`);
    }
}

class StepCounter extends Counter {
    constructor(private step: number) {
        super();
    }

    override increment(): void {
        this.count += this.step - 1; // protected: allowed
        super.increment();
        // this.log is private to Counter: a compile error here
    }

    get value(): number {
        return this.count;
    }
}

const c = new StepCounter(5);
c.increment();
c.increment();
console.log(c.value); // 10

Consulta modificadores de acceso para las reglas completas, incluido por qué ni private ni protected se aplican en tiempo de ejecución.

Volver a declarar un campo con un tipo más estrecho

A menudo una subclase sabe que un campo contiene algo más concreto de lo que dice el padre. Volver a declararlo como pet: Dog tiene un efecto en tiempo de ejecución con los campos de clase modernos: el campo de la subclase se inicializa a undefined después de que super() termine, borrando lo que guardó el constructor padre. Salvo que el constructor de la subclase lo vuelva a asignar, TypeScript lo informa como TS2612 (Property 'pet' will overwrite the base property in 'Home'). Usa declare para cambiar solo el tipo:

class Animal {
    name = "pet";
}
class Dog extends Animal {
    bark(): string {
        return "woof";
    }
}

class Home {
    pet: Animal;
    constructor(pet: Animal) {
        this.pet = pet;
    }
}

class Kennel extends Home {
    declare pet: Dog; // type only: no field is emitted

    constructor(dog: Dog) {
        super(dog);
    }
}

console.log(new Kennel(new Dog()).pet.bark()); // woof

declare no genera nada, así que el valor asignado por el constructor de Home se conserva. El constructor que solo acepta un Dog es lo que hace cierto el tipo más estrecho.

implements frente a extends

Las dos palabras clave responden a preguntas distintas, y una clase puede usar ambas.

interface Serializable {
    serialize(): string;
}

class Entity {
    constructor(readonly id: number) {}
}

class User extends Entity implements Serializable {
    constructor(id: number, readonly email: string) {
        super(id);
    }

    serialize(): string {
        return JSON.stringify({ id: this.id, email: this.email });
    }
}

const u = new User(1, "ada@example.com");
console.log(u.serialize()); // {"id":1,"email":"ada@example.com"}

Una clase solo puede extender una clase (TS1174: Classes can only extend a single class). Para combinar comportamiento de varios sitios, implementa varias interfaces y comparte código mediante composición (un campo que contiene un objeto auxiliar) o mixins.

Mixins

Un mixin es una función que recibe una clase y devuelve una subclase de ella. Ofrece una forma de herencia múltiple que pasa la comprobación de tipos:

type Constructor<T = {}> = new (...args: any[]) => T;

function Timestamped<TBase extends Constructor>(Base: TBase) {
    return class extends Base {
        createdAt = new Date("2024-03-15T10:30:00Z");
    };
}

function Tagged<TBase extends Constructor>(Base: TBase) {
    return class extends Base {
        tags: string[] = [];
        tag(t: string): this {
            this.tags.push(t);
            return this;
        }
    };
}

class Note {
    constructor(public text: string) {}
}

const TaggedNote = Tagged(Timestamped(Note));
const n = new TaggedNote("buy milk").tag("home");
console.log(n.text, n.tags, n.createdAt.toISOString());
// buy milk [ 'home' ] 2024-03-15T10:30:00.000Z

El any[] de Constructor es obligatorio: TypeScript solo acepta como base de un mixin una clase cuyo constructor reciba un único parámetro rest de tipo any[]. Los mixins funcionan, pero hacen más difíciles de leer los tipos y las trazas de error, así que recurre primero a la composición.

Errores habituales

• Llamar a un método sobrescribible desde el constructor base. El constructor base se ejecuta antes de que se inicialicen los campos de la subclase, así que una sobrescritura que lee this.items ve undefined, y una llamada como this.items.push(x) lanza un TypeError en tiempo de ejecución. TypeScript no lo detecta.
• Olvidar super(...) o llamarlo tarde. Errores TS2377 y TS17009; el padre debe construir el objeto antes de que la subclase toque this.
• Volver a declarar un campo del padre sin declare. El campo de la subclase lo restablece a undefined.
• Jerarquías profundas. Cada nivel acopla la hija a los detalles internos del padre. Dos niveles suelen bastar; más allá, prefiere la composición o las interfaces.