Costruttori in TypeScript: parameter property e overload

Un costruttore in TypeScript è il metodo constructor della classe con parametri tipizzati. Non ha un'annotazione del tipo di ritorno: produce sempre un'istanza della classe.

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");

Scrivere constructor(): Product è l'errore TS1093 (Type annotation cannot appear on a constructor declaration). Tutto il resto del funzionamento di new è JavaScript normale.

Parameter property

Il pattern qui sopra (dichiarare un campo, ricevere un parametro, copiarlo) è così comune che TypeScript ha una forma breve. Metti public, private, protected o readonly prima di un parametro del costruttore e diventa 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

È una delle poche funzionalità di TypeScript che genera codice. Il compilatore scrive le assegnazioni al posto tuo:

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

Dato che non si tratta solo di tipi cancellati, le parameter property non funzionano con il type stripping integrato di Node (node file.ts fallisce con ERR_UNSUPPORTED_TYPESCRIPT_SYNTAX), e l'opzione del compilatore erasableSyntaxOnly le segnala come errore TS1294. I progetti che eseguono direttamente i file .ts scrivono i campi a mano.

Parametri facoltativi e predefiniti

I parametri del costruttore seguono le stesse regole dei parametri delle funzioni: ? ne rende uno facoltativo, un valore predefinito lo rende facoltativo e lo riempie, e i parametri obbligatori vengono prima.

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' }

Anche le parameter property possono avere valori predefiniti. Il tipo di color dentro la classe è string | undefined, quindi il codice che lo usa deve prima controllare undefined.

Per i costruttori con molte opzioni, un unico oggetto di opzioni si legge meglio di un lungo elenco posizionale: constructor(opts: { prefix: string; level?: "info" | "debug" }).

Ordine di inizializzazione dei campi

Gli inizializzatori dei campi vengono eseguiti prima del corpo del costruttore, e le parameter property vengono assegnate all'inizio del corpo del costruttore. Quindi l'inizializzatore di un campo non può leggere una parameter property. TypeScript lo intercetta:

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

A runtime l'inizializzatore vedrebbe undefined e produrrebbe NaN. Calcola invece il valore nel corpo del costruttore:

class Grid {
    cells: number;

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

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

Overload del costruttore

Una classe ha esattamente un'implementazione del costruttore, ma puoi elencare sopra di essa diverse firme di overload. Chi chiama vede solo gli overload; la firma dell'implementazione deve essere compatibile con tutti.

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

Gli overload diventano difficili da leggere oltre due o tre forme. I metodi factory statici con nomi descrittivi (Color.fromHex("#ff8800"), Color.fromRgb(10, 20, 30)) sono spesso più chiari e non richiedono di restringere i tipi dentro un unico corpo.

Chiamare super in una sottoclasse

Una classe derivata che dichiara il proprio costruttore deve chiamare super(...) con gli argomenti del genitore, e deve farlo prima di toccare this. Dimenticare la chiamata è l'errore TS2377 (Constructors for derived classes must contain a 'super' call), e usare this prima è TS17009 ('super' must be called before accessing 'this' in the constructor of a derived class). Entrambi rispecchiano regole del runtime JavaScript.

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 sottoclasse che non aggiunge un costruttore eredita quello del genitore, con gli stessi tipi di parametro. Altro sulle sottoclassi in ereditarietà.

Costruttori privati e inizializzazione asincrona

Un costruttore private si può chiamare solo dall'interno della classe. Da fuori, new è l'errore TS2673. È così che obblighi chi chiama a passare da una factory, per un singleton o per un'inizializzazione che deve essere asincrona (i costruttori non possono essere 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();

Qui private è solo una regola di compilazione. Il JavaScript emesso ha un costruttore normale, quindi del semplice codice JavaScript potrebbe comunque chiamare new Connection(...).

Tipi costruttore

Per accettare una classe come valore, tipizza il parametro con una firma di costruzione: new (...args) => Instance. Funziona anche typeof MyClass, ma lega il parametro alla firma del costruttore e ai membri statici di quella sola classe.

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 estraggono la tupla dei parametri e il tipo dell'istanza da un tipo costruttore; sono trattati insieme agli altri helper per le funzioni in ReturnType e Parameters.