Class trong TypeScript: thuộc tính, phương thức, implements

Class trong TypeScript là một class JavaScript có thêm kiểu: mỗi thuộc tính (field) được khai báo kèm kiểu trong thân class, còn phương thức và hàm khởi tạo (constructor) có tham số và giá trị trả về được gán kiểu.

class Account {
    owner: string;
    balance = 0; // type inferred as number

    constructor(owner: string) {
        this.owner = owner;
    }

    deposit(amount: number): number {
        this.balance += amount;
        return this.balance;
    }
}

const acc = new Account("Ada");
acc.deposit(50);
console.log(acc.deposit(25)); // 75
console.log(acc); // Account { owner: 'Ada', balance: 75 }

// @ts-expect-error: Argument of type 'string' is not assignable to parameter of type 'number'.
acc.deposit("10");

Kết quả biên dịch là một class JavaScript bình thường đã bỏ hết kiểu, nên mọi điều về class trong JavaScript vẫn đúng. Phần TypeScript thêm vào diễn ra lúc biên dịch: lời gọi cuối cùng bị từ chối trước khi chương trình chạy.

Khai báo thuộc tính

Một thuộc tính phải được khai báo trong thân class thì hàm khởi tạo mới gán được. Gán this.owner mà chưa khai báo owner là lỗi TS2339 (thuộc tính không tồn tại). Thuộc tính có giá trị khởi tạo sẽ được suy ra kiểu từ giá trị đó, giống như một biến.

Khi bật strict, strictPropertyInitialization kiểm tra rằng mọi thuộc tính không tùy chọn đều có giá trị. Class này quên mất hai thuộc tính:

// This does not compile: two fields are never assigned.
class Profile {
    name: string;
    age: number;
    city = "Paris";
}

console.log(new Profile());

Trình biên dịch báo cả hai:

index.ts(3,5): error TS2564: Property 'name' has no initializer and is not definitely assigned in the constructor.
index.ts(4,5): error TS2564: Property 'age' has no initializer and is not definitely assigned in the constructor.

Phép kiểm tra này tồn tại vì nếu không có nó, new Profile().name.toUpperCase() sẽ qua được bước kiểm tra kiểu rồi sập vì undefined. Bạn sửa từng thuộc tính theo một trong bốn cách: cho nó giá trị khởi tạo, gán nó trong hàm khởi tạo, đánh dấu tùy chọn bằng ?, hoặc viết name!: string khi một framework hay một phương thức init() sẽ gán nó sau. Cách cuối cùng tắt phép kiểm tra cho thuộc tính đó, nên chỉ dùng khi thật cần.

Phương thức và this

Phương thức được gán kiểu giống như hàm. Bên trong phương thức, this có kiểu của instance. Một phương thức có thể trả về this để cho phép gọi nối tiếp (chaining), và kiểu trả về tự động theo các class con.

class QueryBuilder {
    private parts: string[] = [];

    where(condition: string): this {
        this.parts.push(condition);
        return this;
    }

    build(): string {
        return this.parts.join(" AND ");
    }
}

const sql = new QueryBuilder().where("age > 18").where("active = 1").build();
console.log(sql); // age > 18 AND active = 1

Một phương thức bị mất this khi bạn tách nó ra khỏi đối tượng, một bug kinh điển của JavaScript. Mặc định TypeScript không bắt được lỗi này, nhưng sẽ bắt được nếu phương thức khai báo tham số this. Tham số đó bị xóa khỏi kết quả biên dịch và chỉ dùng để canh chỗ gọi hàm:

class Timer {
    seconds = 3;

    describe(this: Timer): string {
        return `${this.seconds}s`;
    }

    // An arrow function field keeps `this` bound to the instance.
    describeBound = (): string => `${this.seconds}s`;
}

const t = new Timer();
const bound = t.describeBound;
console.log(bound()); // 3s

const loose = t.describe;
try {
    // @ts-expect-error: The 'this' context of type 'void' is not assignable to method's 'this' of type 'Timer'.
    loose();
} catch (e) {
    // Without the check, this is what happens at runtime:
    if (e instanceof Error) console.log(e.message); // Cannot read properties of undefined (reading 'seconds')
}

Thuộc tính dạng arrow function hoạt động được vì mỗi instance có một hàm riêng giữ lại this qua closure. Cái giá phải trả là mỗi instance một hàm, thay vì một phương thức dùng chung trên prototype.

Getter và setter

Accessor get và set nhìn từ bên ngoài giống như thuộc tính. Một getter không có setter là chỉ đọc: gán giá trị cho nó là lỗi biên dịch (TS2540).

class Temperature {
    private celsius = 0;

    get fahrenheit(): number {
        return this.celsius * 9 / 5 + 32;
    }

    set fahrenheit(value: number) {
        if (value < -459.67) throw new RangeError("below absolute zero");
        this.celsius = (value - 32) * 5 / 9;
    }

    get kelvin(): number {
        return this.celsius + 273.15;
    }
}

const temp = new Temperature();
temp.fahrenheit = 212;
console.log(temp.fahrenheit, temp.kelvin); // 212 373.15

try {
    // @ts-expect-error: Cannot assign to 'kelvin' because it is a read-only property.
    temp.kelvin = 0;
} catch (e) {
    if (e instanceof Error) console.log(e.message); // Cannot set property kelvin of #<Temperature> which has only a getter
}

Trình biên dịch từ chối phép gán, và nếu phép kiểm tra bị bỏ qua thì khi chạy cũng ném ra TypeError, vì tệp đã biên dịch chạy ở strict mode (trình biên dịch thêm "use strict" ở đầu tệp). RangeError trong setter là phép kiểm tra lúc chạy do chính bạn viết. Kiểu number chỉ nói rằng giá trị là một số; nó không biết gì về khoảng giá trị.

Thành viên static

Thuộc tính và phương thức static thuộc về chính class. Bạn truy cập chúng qua tên class, không qua instance. Khối static { } chạy một lần khi class được định nghĩa.

class IdGenerator {
    static prefix = "user";
    private static next = 1;

    static create(): string {
        return `${IdGenerator.prefix}-${IdGenerator.next++}`;
    }

    static {
        IdGenerator.prefix = "u";
    }
}

console.log(IdGenerator.create()); // u-1
console.log(IdGenerator.create()); // u-2

Thành viên static không dùng được tham số kiểu của class: trong class Box<T>, static empty: T là lỗi TS2302, vì chỉ có một thuộc tính static duy nhất, dùng chung cho mọi Box<string>, Box<number> và các kiểu khác.

Hiện thực một interface

implements yêu cầu trình biên dịch kiểm tra rằng class có đủ mọi thứ mà interface đòi hỏi. Thiếu một thành viên là lỗi TS2420: Class 'X' incorrectly implements interface 'Y'.

interface Shape {
    name: string;
    area(): number;
}

class Circle implements Shape {
    name = "circle";
    constructor(private radius: number) {}

    area(): number {
        return Math.PI * this.radius ** 2;
    }
}

class Square implements Shape {
    name = "square";
    constructor(private side: number) {}

    area(): number {
        return this.side ** 2;
    }
}

const shapes: Shape[] = [new Circle(1), new Square(3)];
for (const s of shapes) console.log(s.name, s.area().toFixed(2));

Một class có thể implements nhiều interface: class Doc implements Printable, Serializable. Có hai việc implements không làm. Nó không tự gán kiểu cho tham số của phương thức: check(s) { ... } trong một class implements check(s: string): boolean vẫn là lỗi TS7006 (Parameter 's' implicitly has an 'any' type), nên bạn vẫn phải chú thích kiểu. Và nó không để lại dấu vết nào khi chạy, nên không thể viết obj instanceof Shape.

private radius trong hàm khởi tạo là một parameter property: nó khai báo và gán thuộc tính trong một bước. Xem hàm khởi tạo.

Class cũng là một kiểu

Khai báo class tạo ra hai thứ cùng một tên: một giá trị (hàm khởi tạo bạn gọi bằng new) và một kiểu (hình dạng của một instance). Vì TypeScript so sánh kiểu theo cấu trúc, mọi đối tượng có cùng các thành viên public đều khớp với kiểu đó, kể cả đối tượng không được tạo ra từ class.

class Point {
    constructor(public x: number, public y: number) {}
}

function distance(p: Point): number {
    return Math.hypot(p.x, p.y);
}

console.log(distance(new Point(3, 4))); // 5
console.log(distance({ x: 6, y: 8 }));  // 10: a plain object with the same shape

// typeof Point is the type of the constructor itself
function make(ctor: typeof Point): Point {
    return new ctor(1, 1);
}
console.log(make(Point)); // Point { x: 1, y: 1 }

Đối tượng thường qua được bước kiểm tra kiểu nhưng khi chạy thì không phải là Point: ({ x: 6, y: 8 }) instanceof Point là false. Một class có thành viên private hoặc #private sẽ chặn điều này: chỉ instance của class đó (hoặc của class con) mới gán được cho nó.

Lỗi thường gặp

• Khai báo thuộc tính mà không bao giờ gán. TS2564 đang báo rằng thuộc tính sẽ là undefined. Hãy khởi tạo nó thay vì dập lỗi bằng !.
• Truyền phương thức làm callback. button.onclick = obj.handle làm mất this. Dùng thuộc tính dạng arrow function hoặc obj.handle.bind(obj).
• Tưởng implements thêm code hoặc kiểu. Nó chỉ kiểm tra. Kiểu của tham số vẫn cần chú thích.
• Dùng instanceof với interface. Interface không tồn tại khi chạy; hãy kiểm tra một class hoặc dùng type guard.
• Tưởng kiểu sẽ kiểm tra dữ liệu. Thuộc tính number nhận mọi số lúc biên dịch, và nhận bất cứ thứ gì từ dữ liệu không có kiểu lúc chạy.