TypeScript Constructor: Parametre Özellikleri ve Overload'lar

TypeScript'te constructor, sınıfın tipli parametrelere sahip constructor metodudur. Dönüş tipi notasyonu yoktur: her zaman sınıfın bir örneğini üretir.

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 yazmak TS1093 hatasıdır (Type annotation cannot appear on a constructor declaration). new ifadesinin nasıl çalıştığına dair geri kalan her şey sıradan JavaScript'tir.

Parametre Özellikleri

Yukarıdaki kalıp (bir alan bildir, bir parametre al, onu kopyala) o kadar yaygındır ki TypeScript'in bunun için bir kısaltması vardır. Bir constructor parametresinin önüne public, private, protected veya readonly koyarsanız parametre bir alana dönüşür:

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

Bu, kod üreten az sayıdaki TypeScript özelliğinden biridir. Atamaları derleyici sizin yerinize yazar:

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

Yalnızca silinen tiplerden ibaret olmadığı için parametre özellikleri Node'un yerleşik tip ayıklamasıyla (type stripping) çalışmaz (node file.ts, ERR_UNSUPPORTED_TYPESCRIPT_SYNTAX ile başarısız olur) ve erasableSyntaxOnly derleyici seçeneği onları TS1294 hatası olarak bildirir. .ts dosyalarını doğrudan çalıştıran projeler alanları elle yazar.

Opsiyonel ve Varsayılan Parametreler

Constructor parametreleri fonksiyon parametreleriyle aynı kurallara uyar: ? bir parametreyi opsiyonel yapar, varsayılan bir değer onu hem opsiyonel yapar hem de doldurur, zorunlu parametreler ise önce gelir.

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

Parametre özelliklerinin de varsayılan değerleri olabilir. Sınıfın içinde color tipi string | undefined olduğundan, onu kullanan kodun önce undefined kontrolü yapması gerekir.

Çok sayıda seçeneği olan constructor'larda, uzun bir konumsal liste yerine tek bir seçenek nesnesi daha kolay okunur: constructor(opts: { prefix: string; level?: "info" | "debug" }).

Alanların Başlatılma Sırası

Alan başlatıcıları constructor gövdesinden önce çalışır, parametre özellikleri ise constructor gövdesinin başında atanır. Bu yüzden bir alan başlatıcısı bir parametre özelliğini okuyamaz. TypeScript bunu yakalar:

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

Çalışma zamanında başlatıcı undefined görür ve NaN üretirdi. Bunun yerine değeri constructor gövdesinde hesaplayın:

class Grid {
    cells: number;

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

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

Constructor Overload'ları

Bir sınıfın tam olarak bir constructor implementasyonu vardır, ancak üstünde birkaç overload imzası listeleyebilirsiniz. Çağıranlar yalnızca overload'ları görür; implementasyon imzasının hepsiyle uyumlu olması gerekir.

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

Overload'lar iki üç biçimden sonra zor okunur hale gelir. Açıklayıcı adlara sahip statik factory metotları (Color.fromHex("#ff8800"), Color.fromRgb(10, 20, 30)) çoğu zaman daha anlaşılırdır ve tek bir gövde içinde tip daraltma gerektirmez.

Alt Sınıfta super Çağırmak

Kendi constructor'ını bildiren türetilmiş bir sınıf, ebeveynin argümanlarıyla super(...) çağırmalı ve bunu this'e dokunmadan önce yapmalıdır. Çağrıyı unutmak TS2377 hatasıdır (Constructors for derived classes must contain a 'super' call), önce this kullanmak ise TS17009 hatasıdır ('super' must be called before accessing 'this' in the constructor of a derived class). İkisi de JavaScript'in çalışma zamanı kurallarının karşılığıdır.

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

Constructor eklemeyen bir alt sınıf, ebeveyninkini aynı parametre tipleriyle miras alır. Alt sınıflar hakkında daha fazlası için kalıtım sayfasına bakın.

Private Constructor'lar ve Asenkron Kurulum

private bir constructor yalnızca sınıfın içinden çağrılabilir. Dışarıda new kullanmak TS2673 hatasıdır. Çağıranları bir factory'den geçmeye böyle zorlarsınız: bir singleton için ya da asenkron olması gereken bir kurulum için (constructor'lar async olamaz).

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

Buradaki private yalnızca derleme zamanı kuralıdır. Üretilen JavaScript'te sıradan bir constructor vardır, bu yüzden düz JavaScript kodu yine de new Connection(...) çağırabilir.

Constructor Tipleri

Bir sınıfı değer olarak kabul etmek için parametreyi bir construct imzasıyla tipleyin: new (...args) => Instance. typeof MyClass da çalışır, ancak parametreyi o tek sınıfın constructor imzasına ve statik üyelerine bağlar.

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 ve InstanceType, bir constructor tipinden parametre tuple'ını ve örnek tipini çıkarır; diğer fonksiyon yardımcılarıyla birlikte ReturnType ve Parameters sayfasında anlatılır.