TypeScript Konstruktor: Parameter Properties und Overloads

Ein Konstruktor in TypeScript ist die Methode constructor einer Klasse mit typisierten Parametern. Er hat keine Annotation für den Rückgabetyp: Er erzeugt immer eine Instanz der Klasse.

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

constructor(): Product zu schreiben ist der Fehler TS1093 (Type annotation cannot appear on a constructor declaration). Alles andere daran, wie new funktioniert, ist reines JavaScript.

Parameter Properties

Das Muster oben (ein Feld deklarieren, einen Parameter nehmen, ihn hinüberkopieren) ist so verbreitet, dass TypeScript eine Kurzform dafür hat. Setze public, private, protected oder readonly vor einen Konstruktorparameter, und er wird zu einem Feld:

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

Das ist eines der wenigen TypeScript-Features, die Code erzeugen. Der Compiler schreibt die Zuweisungen für dich:

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

Weil das nicht nur entfernbare Typen sind, laufen Parameter Properties nicht mit dem eingebauten Type Stripping von Node (node file.ts scheitert mit ERR_UNSUPPORTED_TYPESCRIPT_SYNTAX), und die Compileroption erasableSyntaxOnly meldet sie als Fehler TS1294. Projekte, die .ts-Dateien direkt ausführen, schreiben die Felder von Hand aus.

Optionale Parameter und Standardwerte

Konstruktorparameter folgen denselben Regeln wie Funktionsparameter: ? macht einen optional, ein Standardwert macht ihn optional und füllt ihn aus, und Pflichtparameter stehen vorn.

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

Auch Parameter Properties können Standardwerte haben. Der Typ von color in der Klasse ist string | undefined, Code, der es verwendet, muss also zuerst auf undefined prüfen.

Bei Konstruktoren mit vielen Optionen liest sich ein Options-Objekt besser als eine lange Liste von Positionen: constructor(opts: { prefix: string; level?: "info" | "debug" }).

Reihenfolge der Feldinitialisierung

Feldinitialisierer laufen vor dem Rumpf des Konstruktors, und Parameter Properties werden am Anfang des Konstruktorrumpfs zugewiesen. Ein Feldinitialisierer kann also keine Parameter Property lesen. TypeScript findet das:

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

Zur Laufzeit würde der Initialisierer undefined sehen und NaN erzeugen. Berechne den Wert stattdessen im Konstruktorrumpf:

class Grid {
    cells: number;

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

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

Konstruktor-Überladungen

Eine Klasse hat genau eine Konstruktorimplementierung, aber du kannst mehrere Overload Signatures darüber aufführen. Aufrufer sehen nur die Überladungen; die Implementierungssignatur muss mit allen kompatibel sein.

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

Überladungen werden ab zwei oder drei Formen schwer lesbar. Statische Factory-Methoden mit sprechenden Namen (Color.fromHex("#ff8800"), Color.fromRgb(10, 20, 30)) sind oft klarer und brauchen kein Narrowing innerhalb eines Rumpfs.

super in einer Unterklasse aufrufen

Eine abgeleitete Klasse, die einen eigenen Konstruktor deklariert, muss super(...) mit den Argumenten der Elternklasse aufrufen, und zwar bevor sie this berührt. Den Aufruf zu vergessen ist der Fehler TS2377 (Constructors for derived classes must contain a 'super' call), und this zuerst zu verwenden ist TS17009 ('super' must be called before accessing 'this' in the constructor of a derived class). Beide spiegeln Laufzeitregeln von JavaScript wider.

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

Eine Unterklasse ohne eigenen Konstruktor erbt den der Elternklasse, mit denselben Parametertypen. Mehr zu Unterklassen unter Vererbung.

Private Konstruktoren und asynchrone Initialisierung

Ein private Konstruktor kann nur innerhalb der Klasse aufgerufen werden. Außerhalb ist new der Fehler TS2673. So zwingst du Aufrufer über eine Factory, für ein Singleton oder für Initialisierung, die asynchron sein muss (Konstruktoren können nicht async sein).

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

private ist hier nur eine Regel beim Kompilieren. Das erzeugte JavaScript hat einen gewöhnlichen Konstruktor, reiner JavaScript-Code könnte also weiterhin new Connection(...) aufrufen.

Konstruktortypen

Um eine Klasse als Wert anzunehmen, typisierst du den Parameter mit einer Construct Signature: new (...args) => Instance. typeof MyClass funktioniert auch, bindet den Parameter aber an die Konstruktorsignatur und die statischen Member genau dieser einen Klasse.

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 und InstanceType holen das Parametertupel und den Instanztyp aus einem Konstruktortyp; sie werden zusammen mit den anderen Hilfstypen für Funktionen unter ReturnType und Parameters behandelt.