Constructor trong TypeScript: parameter property, overload

Hàm khởi tạo (constructor) trong TypeScript là phương thức constructor của class với các tham số có kiểu. Nó không có chú thích kiểu trả về: nó luôn tạo ra một instance của class.

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

Viết constructor(): Product là lỗi TS1093 (Type annotation cannot appear on a constructor declaration). Mọi thứ khác về cách new hoạt động đều là JavaScript thuần.

Parameter property

Mẫu ở trên (khai báo thuộc tính, nhận tham số, chép giá trị sang) phổ biến đến mức TypeScript có cách viết tắt. Đặt public, private, protected hoặc readonly trước một tham số của hàm khởi tạo và nó trở thành một thuộc tính:

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

Đây là một trong số ít tính năng của TypeScript có sinh ra code. Trình biên dịch viết các phép gán thay bạn:

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

Vì đây không chỉ là kiểu bị xóa đi, parameter property không chạy được với cơ chế bỏ kiểu có sẵn của Node (node file.ts thất bại với ERR_UNSUPPORTED_TYPESCRIPT_SYNTAX), và tùy chọn biên dịch erasableSyntaxOnly báo chúng là lỗi TS1294. Các dự án chạy trực tiếp tệp .ts sẽ tự viết đầy đủ các thuộc tính.

Tham số tùy chọn và tham số mặc định

Tham số của hàm khởi tạo theo cùng quy tắc với tham số của hàm: ? làm một tham số thành tùy chọn, giá trị mặc định làm nó tùy chọn và tự điền giá trị, còn các tham số bắt buộc đứng trước.

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

Parameter property cũng có thể có giá trị mặc định. Kiểu của color bên trong class là string | undefined, nên code dùng nó phải kiểm tra undefined trước.

Với hàm khởi tạo có nhiều tùy chọn, một đối tượng tùy chọn dễ đọc hơn một danh sách tham số dài theo vị trí: constructor(opts: { prefix: string; level?: "info" | "debug" }).

Thứ tự khởi tạo thuộc tính

Giá trị khởi tạo của thuộc tính chạy trước thân hàm khởi tạo, còn parameter property được gán ở đầu thân hàm khởi tạo. Vì vậy giá trị khởi tạo của thuộc tính không đọc được parameter property. TypeScript bắt được lỗi này:

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

Khi chạy, giá trị khởi tạo sẽ thấy undefined và cho ra NaN. Hãy tính giá trị đó trong thân hàm khởi tạo:

class Grid {
    cells: number;

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

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

Overload cho hàm khởi tạo

Một class có đúng một phần hiện thực hàm khởi tạo, nhưng bạn có thể liệt kê nhiều chữ ký overload phía trên nó. Nơi gọi chỉ thấy các overload; chữ ký của phần hiện thực phải tương thích với tất cả.

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 khó đọc khi vượt quá hai hoặc ba dạng. Các phương thức factory static có tên mô tả rõ (Color.fromHex("#ff8800"), Color.fromRgb(10, 20, 30)) thường rõ ràng hơn và không cần thu hẹp kiểu bên trong một thân hàm.

Gọi super trong class con

Một class dẫn xuất tự khai báo hàm khởi tạo phải gọi super(...) với các đối số của class cha, và phải gọi trước khi đụng đến this. Quên gọi là lỗi TS2377 (Constructors for derived classes must contain a 'super' call), còn dùng this trước là TS17009 ('super' must be called before accessing 'this' in the constructor of a derived class). Cả hai đều phản ánh quy tắc lúc chạy của 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' ] }

Một class con không khai báo hàm khởi tạo sẽ kế thừa hàm khởi tạo của class cha, với cùng kiểu tham số. Xem thêm về class con ở kế thừa.

Hàm khởi tạo private và khởi tạo bất đồng bộ

Hàm khởi tạo private chỉ gọi được từ bên trong class. Ở bên ngoài, new là lỗi TS2673. Đây là cách buộc nơi gọi đi qua một factory, cho singleton hoặc cho phần khởi tạo phải chạy bất đồng bộ (hàm khởi tạo không thể là 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 ở đây chỉ là quy tắc lúc biên dịch. JavaScript được sinh ra có một hàm khởi tạo bình thường, nên code JavaScript thuần vẫn có thể gọi new Connection(...).

Kiểu hàm khởi tạo

Để nhận một class làm giá trị, hãy gán kiểu cho tham số bằng construct signature: new (...args) => Instance. typeof MyClass cũng dùng được, nhưng nó gắn tham số với đúng chữ ký hàm khởi tạo và các thành viên static của class đó.

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 và InstanceType trích xuất tuple tham số và kiểu instance từ một kiểu hàm khởi tạo; chúng được trình bày cùng các helper khác cho hàm ở trang ReturnType và Parameters.