Konstruktor w TypeScript: właściwości parametrów i przeciążenia

Konstruktor w TypeScript to metoda constructor klasy z otypowanymi parametrami. Nie ma adnotacji typu zwracanego: zawsze tworzy instancję klasy.

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

Zapis constructor(): Product to błąd TS1093 (Type annotation cannot appear on a constructor declaration). Cała reszta działania new to zwykły JavaScript.

Właściwości parametrów

Powyższy wzorzec (zadeklaruj pole, przyjmij parametr, skopiuj go) jest tak częsty, że TypeScript ma na niego skrót. Umieść public, private, protected albo readonly przed parametrem konstruktora, a stanie się on polem:

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

To jedna z niewielu funkcji TypeScriptu, które generują kod. Kompilator pisze przypisania za ciebie:

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

Ponieważ nie są to tylko usuwane typy, właściwości parametrów nie działają przy wbudowanym w Node usuwaniu typów (node file.ts kończy się błędem ERR_UNSUPPORTED_TYPESCRIPT_SYNTAX), a opcja kompilatora erasableSyntaxOnly zgłasza je jako błąd TS1294. Projekty, które uruchamiają pliki .ts bezpośrednio, wypisują pola ręcznie.

Parametry opcjonalne i domyślne

Parametry konstruktora podlegają tym samym zasadom co parametry funkcji: ? czyni parametr opcjonalnym, wartość domyślna czyni go opcjonalnym i go uzupełnia, a parametry wymagane są na początku.

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

Właściwości parametrów też mogą mieć wartości domyślne. Typ color wewnątrz klasy to string | undefined, więc kod, który go używa, musi najpierw sprawdzić undefined.

Przy konstruktorach z wieloma opcjami jeden obiekt opcji czyta się lepiej niż długą listę pozycyjną: constructor(opts: { prefix: string; level?: "info" | "debug" }).

Kolejność inicjalizacji pól

Inicjalizatory pól wykonują się przed ciałem konstruktora, a właściwości parametrów są przypisywane na początku ciała konstruktora. Dlatego inicjalizator pola nie może odczytać właściwości parametru. TypeScript to wyłapuje:

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

W czasie działania inicjalizator zobaczyłby undefined i wyprodukował NaN. Zamiast tego oblicz wartość w ciele konstruktora:

class Grid {
    cells: number;

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

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

Przeciążenia konstruktora

Klasa ma dokładnie jedną implementację konstruktora, ale nad nią możesz wypisać kilka sygnatur przeciążeń. Wywołujący widzą tylko przeciążenia; sygnatura implementacji musi być zgodna z nimi wszystkimi.

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

Przeciążenia stają się trudne do czytania po dwóch albo trzech kształtach. Statyczne metody fabrykujące z opisowymi nazwami (Color.fromHex("#ff8800"), Color.fromRgb(10, 20, 30)) są często czytelniejsze i nie wymagają zawężania typów w jednym ciele.

Wywołanie super w podklasie

Klasa pochodna, która deklaruje własny konstruktor, musi wywołać super(...) z argumentami klasy nadrzędnej i musi to zrobić, zanim dotknie this. Pominięcie wywołania to błąd TS2377 (Constructors for derived classes must contain a 'super' call), a użycie this wcześniej to TS17009 ('super' must be called before accessing 'this' in the constructor of a derived class). Oba odzwierciedlają zasady JavaScriptu w czasie działania.

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

Podklasa, która nie dodaje konstruktora, dziedziczy konstruktor klasy nadrzędnej z tymi samymi typami parametrów. Więcej o podklasach na stronie o dziedziczeniu.

Prywatne konstruktory i asynchroniczna konfiguracja

Konstruktor private można wywołać tylko z wnętrza klasy. Na zewnątrz new to błąd TS2673. W ten sposób zmuszasz wywołujących do użycia fabryki, na przykład dla singletona albo dla konfiguracji, która musi być asynchroniczna (konstruktory nie mogą być 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();

private jest tu wyłącznie regułą czasu kompilacji. Wyemitowany JavaScript ma zwykły konstruktor, więc zwykły kod JavaScript nadal może wywołać new Connection(...).

Typy konstruktorów

Żeby przyjąć klasę jako wartość, otypuj parametr sygnaturą konstruktora: new (...args) => Instance. typeof MyClass też działa, ale wiąże parametr z sygnaturą konstruktora i składowymi statycznymi tej jednej klasy.

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 i InstanceType wyciągają z typu konstruktora krotkę parametrów i typ instancji; omawia je, razem z innymi pomocnikami funkcji, strona o ReturnType i Parameters.