Clases en TypeScript: campos, métodos, getters e implements

Una clase de TypeScript es una clase de JavaScript con tipos: cada campo se declara con su tipo en el cuerpo de la clase, y los métodos y el constructor tienen parámetros y valores de retorno tipados.

class Account {
    owner: string;
    balance = 0; // type inferred as number

    constructor(owner: string) {
        this.owner = owner;
    }

    deposit(amount: number): number {
        this.balance += amount;
        return this.balance;
    }
}

const acc = new Account("Ada");
acc.deposit(50);
console.log(acc.deposit(25)); // 75
console.log(acc); // Account { owner: 'Ada', balance: 75 }

// @ts-expect-error: Argument of type 'string' is not assignable to parameter of type 'number'.
acc.deposit("10");

La salida compilada es una clase normal de JavaScript sin los tipos, así que todo lo de las clases de JavaScript sigue siendo válido. Lo que añade TypeScript ocurre en tiempo de compilación: la última llamada se rechaza antes de que el programa se ejecute.

Declarar campos

Un campo necesita una declaración en el cuerpo de la clase antes de que el constructor pueda asignarlo. Asignar this.owner sin declarar owner es el error TS2339 (la propiedad no existe). Un campo con inicializador recibe el tipo inferido del valor, igual que una variable.

Con strict activado, strictPropertyInitialization comprueba que cada campo no opcional recibe un valor. Esta clase olvida dos:

// This does not compile: two fields are never assigned.
class Profile {
    name: string;
    age: number;
    city = "Paris";
}

console.log(new Profile());

El compilador informa de los dos:

index.ts(3,5): error TS2564: Property 'name' has no initializer and is not definitely assigned in the constructor.
index.ts(4,5): error TS2564: Property 'age' has no initializer and is not definitely assigned in the constructor.

La comprobación existe porque sin ella new Profile().name.toUpperCase() pasaría la comprobación de tipos y luego fallaría con undefined. Arregla cada campo de una de cuatro formas: dale un inicializador, asígnalo en el constructor, márcalo como opcional con ?, o escribe name!: string cuando un framework o un método init() lo asigne después. La última desactiva la comprobación para ese campo, así que úsala con moderación.

Métodos y this

Los métodos se tipan como funciones. Dentro de un método, this tiene el tipo de la instancia. Un método puede devolver this para permitir el encadenamiento, y el tipo de retorno sigue a las subclases automáticamente.

class QueryBuilder {
    private parts: string[] = [];

    where(condition: string): this {
        this.parts.push(condition);
        return this;
    }

    build(): string {
        return this.parts.join(" AND ");
    }
}

const sql = new QueryBuilder().where("age > 18").where("active = 1").build();
console.log(sql); // age > 18 AND active = 1

Un método pierde su this cuando lo separas del objeto, un bug clásico de JavaScript. TypeScript no lo detecta por defecto, pero sí lo hace si el método declara un parámetro this. Ese parámetro se borra de la salida y solo protege el lugar de la llamada:

class Timer {
    seconds = 3;

    describe(this: Timer): string {
        return `${this.seconds}s`;
    }

    // An arrow function field keeps `this` bound to the instance.
    describeBound = (): string => `${this.seconds}s`;
}

const t = new Timer();
const bound = t.describeBound;
console.log(bound()); // 3s

const loose = t.describe;
try {
    // @ts-expect-error: The 'this' context of type 'void' is not assignable to method's 'this' of type 'Timer'.
    loose();
} catch (e) {
    // Without the check, this is what happens at runtime:
    if (e instanceof Error) console.log(e.message); // Cannot read properties of undefined (reading 'seconds')
}

El campo con función flecha funciona porque cada instancia recibe su propia función, que captura this. El precio es una función por instancia en lugar de un único método compartido en el prototipo.

Getters y setters

Los accesores get y set parecen propiedades desde fuera. Un getter sin setter es de solo lectura: asignarle un valor es un error de compilación (TS2540).

class Temperature {
    private celsius = 0;

    get fahrenheit(): number {
        return this.celsius * 9 / 5 + 32;
    }

    set fahrenheit(value: number) {
        if (value < -459.67) throw new RangeError("below absolute zero");
        this.celsius = (value - 32) * 5 / 9;
    }

    get kelvin(): number {
        return this.celsius + 273.15;
    }
}

const temp = new Temperature();
temp.fahrenheit = 212;
console.log(temp.fahrenheit, temp.kelvin); // 212 373.15

try {
    // @ts-expect-error: Cannot assign to 'kelvin' because it is a read-only property.
    temp.kelvin = 0;
} catch (e) {
    if (e instanceof Error) console.log(e.message); // Cannot set property kelvin of #<Temperature> which has only a getter
}

El compilador rechaza la asignación, y si se salta la comprobación el runtime también lanza un TypeError, porque el archivo compilado se ejecuta en modo estricto (el compilador genera "use strict" al principio). El RangeError del setter es una comprobación en tiempo de ejecución que escribiste tú. El tipo number solo dice que el valor es un número; no sabe nada de rangos.

Miembros estáticos

Los campos y métodos static pertenecen a la propia clase. Accedes a ellos a través del nombre de la clase, no de una instancia. Un bloque static { } se ejecuta una vez, cuando se define la clase.

class IdGenerator {
    static prefix = "user";
    private static next = 1;

    static create(): string {
        return `${IdGenerator.prefix}-${IdGenerator.next++}`;
    }

    static {
        IdGenerator.prefix = "u";
    }
}

console.log(IdGenerator.create()); // u-1
console.log(IdGenerator.create()); // u-2

Los miembros estáticos no pueden usar los parámetros de tipo de la clase: en class Box<T>, un static empty: T es el error TS2302, porque solo hay un campo estático, compartido por todos los Box<string>, Box<number> y demás.

Implementar una interfaz

implements le pide al compilador que compruebe que la clase tiene todo lo que exige una interfaz. Un miembro que falta es el error TS2420: Class 'X' incorrectly implements interface 'Y'.

interface Shape {
    name: string;
    area(): number;
}

class Circle implements Shape {
    name = "circle";
    constructor(private radius: number) {}

    area(): number {
        return Math.PI * this.radius ** 2;
    }
}

class Square implements Shape {
    name = "square";
    constructor(private side: number) {}

    area(): number {
        return this.side ** 2;
    }
}

const shapes: Shape[] = [new Circle(1), new Square(3)];
for (const s of shapes) console.log(s.name, s.area().toFixed(2));

Una clase puede implementar varias interfaces: class Doc implements Printable, Serializable. Hay dos cosas que implements no hace. No tipa por ti los parámetros de los métodos de la clase: check(s) { ... } dentro de una clase que implementa check(s: string): boolean sigue siendo el error TS7006 (Parameter 's' implicitly has an 'any' type), así que anótalos. Y no deja rastro en tiempo de ejecución, así que obj instanceof Shape no es posible.

El private radius del constructor es una propiedad de parámetro: declara y asigna el campo en un solo paso. Consulta constructores.

Una clase también es un tipo

Una declaración de clase crea dos cosas con un mismo nombre: un valor (la función constructora que llamas con new) y un tipo (la forma de una instancia). Como TypeScript compara los tipos por estructura, cualquier objeto con los mismos miembros públicos encaja en el tipo, aunque no lo haya creado la clase.

class Point {
    constructor(public x: number, public y: number) {}
}

function distance(p: Point): number {
    return Math.hypot(p.x, p.y);
}

console.log(distance(new Point(3, 4))); // 5
console.log(distance({ x: 6, y: 8 }));  // 10: a plain object with the same shape

// typeof Point is the type of the constructor itself
function make(ctor: typeof Point): Point {
    return new ctor(1, 1);
}
console.log(make(Point)); // Point { x: 1, y: 1 }

El objeto normal pasa la comprobación de tipos pero no es un Point en tiempo de ejecución: ({ x: 6, y: 8 }) instanceof Point es false. Una clase con un miembro private o #private lo impide: solo las instancias de esa clase (o de sus subclases) se le pueden asignar.

Errores habituales

• Declarar un campo y no asignarlo nunca. TS2564 te está diciendo que el campo sería undefined. Inicialízalo en lugar de silenciarlo con !.
• Pasar un método como callback. button.onclick = obj.handle pierde this. Usa un campo con función flecha u obj.handle.bind(obj).
• Esperar que implements añada código o tipos. Solo comprueba. Los tipos de los parámetros siguen necesitando anotaciones.
• Usar instanceof con una interfaz. Las interfaces no existen en tiempo de ejecución; comprueba una clase o usa un type guard.
• Suponer que los tipos validan los datos. Un campo number acepta cualquier número en tiempo de compilación, y cualquier cosa que llegue de datos sin tipar en tiempo de ejecución.