Constructor en TypeScript: parameter properties y sobrecargas

Un constructor en TypeScript es el método constructor de la clase con parámetros tipados. No lleva anotación de tipo de retorno: siempre produce una instancia de la clase.

class Product {
    name: string;
    price: number;

    constructor(name: string, price: number) {
        this.name = name;
        this.price = price;
    }
}

const p = new Product("Lamp", 39);
console.log(p); // Product { name: 'Lamp', price: 39 }

// @ts-expect-error: Expected 2 arguments, but got 1.
new Product("Chair");

Escribir constructor(): Product es el error TS1093 (Type annotation cannot appear on a constructor declaration). Todo lo demás sobre cómo funciona new es JavaScript normal.

Parameter properties

El patrón de arriba (declarar un campo, recibir un parámetro, copiarlo) es tan habitual que TypeScript tiene una forma abreviada. Pon public, private, protected o readonly delante de un parámetro del constructor y se convierte en un campo:

class Product {
    constructor(
        public name: string,
        private price: number,
        readonly sku: string,
    ) {}

    label(): string {
        return `${this.name} (${this.sku}): $${this.price}`;
    }
}

const lamp = new Product("Lamp", 39, "LMP-1");
console.log(lamp.label()); // Lamp (LMP-1): $39
console.log(lamp.name, lamp.sku); // Lamp LMP-1
// lamp.price is private: accessing it outside the class is a compile error

Es una de las pocas características de TypeScript que generan código. El compilador escribe las asignaciones por ti:

class Product {
    name;
    price;
    sku;
    constructor(name, price, sku) {
        this.name = name;
        this.price = price;
        this.sku = sku;
    }
    // ...
}

Como no son simples tipos que se borran, las parameter properties no funcionan con el type stripping integrado de Node (node file.ts falla con ERR_UNSUPPORTED_TYPESCRIPT_SYNTAX), y la opción del compilador erasableSyntaxOnly las marca con el error TS1294. Los proyectos que ejecutan archivos .ts directamente escriben los campos a mano.

Parámetros opcionales y por defecto

Los parámetros del constructor siguen las mismas reglas que los de una función: ? hace uno opcional, un valor por defecto lo hace opcional y lo rellena, y los parámetros obligatorios van primero.

class Logger {
    constructor(
        readonly prefix: string,
        readonly level: "info" | "debug" = "info",
        readonly color?: string,
    ) {}
}

console.log(new Logger("app"));
// Logger { prefix: 'app', level: 'info', color: undefined }
console.log(new Logger("db", "debug", "blue"));
// Logger { prefix: 'db', level: 'debug', color: 'blue' }

Las parameter properties también pueden tener valores por defecto. El tipo de color dentro de la clase es string | undefined, así que el código que lo usa debe comprobar antes undefined.

Para constructores con muchas opciones, un único objeto de opciones se lee mejor que una larga lista posicional: constructor(opts: { prefix: string; level?: "info" | "debug" }).

Orden de inicialización de los campos

Los inicializadores de campo se ejecutan antes del cuerpo del constructor, y las parameter properties se asignan al principio del cuerpo del constructor. Así que un inicializador de campo no puede leer una parameter property. TypeScript lo detecta:

// This does not compile: the initializer reads `size` too early.
class Grid {
    cells = this.size * this.size;

    constructor(public size: number) {}
}

console.log(new Grid(3).cells);

index.ts(3,18): error TS2729: Property 'size' is used before its initialization.
index.ts(3,30): error TS2729: Property 'size' is used before its initialization.

En tiempo de ejecución el inicializador vería undefined y produciría NaN. Calcula el valor en el cuerpo del constructor:

class Grid {
    cells: number;

    constructor(public size: number) {
        this.cells = size * size;
    }
}

console.log(new Grid(3).cells); // 9

Sobrecargas del constructor

Una clase tiene exactamente una implementación del constructor, pero puedes escribir varias firmas de sobrecarga encima. Quien llama solo ve las sobrecargas; la firma de implementación debe ser compatible con todas ellas.

class Color {
    r: number;
    g: number;
    b: number;

    constructor(hex: string);
    constructor(r: number, g: number, b: number);
    constructor(a: string | number, g = 0, b = 0) {
        if (typeof a === "string") {
            const n = parseInt(a.replace("#", ""), 16);
            this.r = (n >> 16) & 255;
            this.g = (n >> 8) & 255;
            this.b = n & 255;
        } else {
            this.r = a;
            this.g = g;
            this.b = b;
        }
    }
}

console.log(new Color("#ff8800")); // Color { r: 255, g: 136, b: 0 }
console.log(new Color(10, 20, 30)); // Color { r: 10, g: 20, b: 30 }
// new Color(10, 20) is an error: no overload takes 2 arguments

Las sobrecargas se vuelven difíciles de leer a partir de dos o tres formas. Los métodos de fábrica estáticos con nombres descriptivos (Color.fromHex("#ff8800"), Color.fromRgb(10, 20, 30)) suelen ser más claros y no necesitan estrechar tipos dentro de un único cuerpo.

Llamar a super en una subclase

Una clase derivada que declara su propio constructor debe llamar a super(...) con los argumentos del padre, y debe hacerlo antes de tocar this. Olvidar la llamada es el error TS2377 (Constructors for derived classes must contain a 'super' call), y usar this antes es TS17009 ('super' must be called before accessing 'this' in the constructor of a derived class). Los dos reflejan reglas de JavaScript en tiempo de ejecución.

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

class Dog extends Animal {
    tricks: string[];

    constructor(name: string, ...tricks: string[]) {
        super(name); // must come first
        this.tricks = tricks;
    }
}

const rex = new Dog("Rex", "sit", "roll");
console.log(rex); // Dog { name: 'Rex', tricks: [ 'sit', 'roll' ] }

Una subclase que no añade constructor hereda el del padre, con los mismos tipos de parámetros. Hay más sobre subclases en herencia.

Constructores privados y configuración asíncrona

Un constructor private solo se puede llamar desde dentro de la clase. Fuera, new es el error TS2673. Así obligas a usar una fábrica, para un singleton o para una configuración que tiene que ser asíncrona (los constructores no pueden ser async).

class Connection {
    private constructor(readonly url: string, readonly version: number) {}

    static async open(url: string): Promise<Connection> {
        const version = await Promise.resolve(3); // stands in for a real handshake
        return new Connection(url, version);
    }
}

async function main() {
    const conn = await Connection.open("db://local");
    console.log(conn.url, conn.version); // db://local 3
}
main();

Aquí private es solo una regla en tiempo de compilación. El JavaScript generado tiene un constructor normal, así que código JavaScript normal podría seguir llamando a new Connection(...).

Tipos de constructor

Para aceptar una clase como valor, tipa el parámetro con una firma de construcción: new (...args) => Instance. typeof MyClass también funciona, pero ata el parámetro a la firma del constructor y a los miembros estáticos de esa única clase.

class Circle {
    constructor(public r: number) {}
}
class Square {
    constructor(public r: number) {}
}

type ShapeCtor<T> = new (size: number) => T;

function makeAll<T>(ctor: ShapeCtor<T>, sizes: number[]): T[] {
    return sizes.map((s) => new ctor(s));
}

console.log(makeAll(Circle, [1, 2])); // [ Circle { r: 1 }, Circle { r: 2 } ]
console.log(makeAll(Square, [5]));    // [ Square { r: 5 } ]

type CircleArgs = ConstructorParameters<typeof Circle>; // [r: number]
const args: CircleArgs = [7];
console.log(new Circle(...args)); // Circle { r: 7 }

ConstructorParameters e InstanceType extraen la tupla de parámetros y el tipo de instancia de un tipo constructor; se explican junto con las demás funciones auxiliares en ReturnType y Parameters.