Klasy w TypeScript: pola, metody, gettery i implements

Klasa w TypeScript to klasa JavaScript z typami: każde pole jest deklarowane z typem w ciele klasy, a metody i konstruktor dostają otypowane parametry i wartości zwracane.

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

Skompilowany wynik to zwykła klasa JavaScript bez typów, więc wszystko ze strony o klasach w JavaScript nadal obowiązuje. To, co dodaje TypeScript, dzieje się w czasie kompilacji: ostatnie wywołanie zostaje odrzucone, zanim program się uruchomi.

Deklarowanie pól

Pole wymaga deklaracji w ciele klasy, zanim konstruktor będzie mógł je przypisać. Przypisanie this.owner bez zadeklarowania owner to błąd TS2339 (właściwość nie istnieje). Pole z inicjalizatorem dostaje typ wywnioskowany z wartości, tak jak zmienna.

Przy włączonym strict opcja strictPropertyInitialization sprawdza, czy każde nieopcjonalne pole dostaje wartość. Ta klasa zapomina o dwóch:

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

console.log(new Profile());

Kompilator zgłasza oba:

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.

To sprawdzenie istnieje, bo bez niego new Profile().name.toUpperCase() przeszłoby sprawdzanie typów, a potem wywaliło się na undefined. Napraw każde pole na jeden z czterech sposobów: daj mu inicjalizator, przypisz je w konstruktorze, oznacz je jako opcjonalne przez ? albo napisz name!: string, gdy framework lub metoda init() ustawia je później. Ostatni sposób wyłącza sprawdzenie dla tego pola, więc używaj go oszczędnie.

Metody i this

Metody typuje się jak funkcje. Wewnątrz metody this ma typ instancji. Metoda może zwracać this, żeby umożliwić łańcuchowanie, a typ zwracany automatycznie podąża za podklasami.

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

Metoda traci swoje this, gdy wyjmiesz ją z obiektu, co jest klasycznym błędem JavaScriptu. TypeScript domyślnie tego nie wyłapuje, ale wyłapie, jeśli metoda zadeklaruje parametr this. Ten parametr jest usuwany z wyniku i pilnuje tylko miejsca wywołania:

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

Pole z funkcją strzałkową działa, bo każda instancja dostaje własną funkcję, która domyka this. Kosztem jest jedna funkcja na instancję zamiast jednej wspólnej metody w prototypie.

Gettery i settery

Akcesory get i set z zewnątrz wyglądają jak właściwości. Getter bez settera jest tylko do odczytu: przypisanie do niego to błąd kompilacji (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
}

Kompilator odrzuca przypisanie, a jeśli sprawdzenie zostanie pominięte, także środowisko uruchomieniowe rzuca TypeError, bo skompilowany plik działa w trybie ścisłym (kompilator emituje "use strict" na początku). RangeError w setterze to twoje własne sprawdzenie w czasie działania. Typ number mówi tylko, że wartość jest liczbą; nic nie wie o zakresach.

Składowe statyczne

Pola i metody static należą do samej klasy. Sięgasz do nich przez nazwę klasy, a nie przez instancję. Blok static { } wykonuje się raz, gdy klasa zostaje zdefiniowana.

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

Składowe statyczne nie mogą używać parametrów typu klasy: w class Box<T> zapis static empty: T to błąd TS2302, bo istnieje tylko jedno pole statyczne, wspólne dla każdego Box<string>, Box<number> i tak dalej.

Implementowanie interfejsu

implements prosi kompilator o sprawdzenie, czy klasa ma wszystko, czego wymaga interfejs. Brakująca składowa to błąd 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));

Klasa może implementować kilka interfejsów: class Doc implements Printable, Serializable. Są dwie rzeczy, których implements nie robi. Nie typuje za ciebie parametrów metod klasy: check(s) { ... } w klasie, która implementuje check(s: string): boolean, to nadal błąd TS7006 (Parameter 's' implicitly has an 'any' type), więc dodaj adnotacje. Poza tym nie zostawia śladu w czasie działania, więc obj instanceof Shape nie jest możliwe.

private radius w konstruktorze to właściwość parametru: deklaruje i przypisuje pole w jednym kroku. Zobacz konstruktory.

Klasa jest też typem

Deklaracja klasy tworzy dwie rzeczy o jednej nazwie: wartość (funkcję konstruktora wywoływaną przez new) i typ (kształt instancji). Ponieważ TypeScript porównuje typy według struktury, do typu pasuje każdy obiekt z tymi samymi publicznymi składowymi, nawet jeśli nie utworzyła go ta klasa.

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 }

Zwykły obiekt przechodzi sprawdzanie typów, ale w czasie działania nie jest Point: ({ x: 6, y: 8 }) instanceof Point daje false. Klasa ze składową private lub #private to blokuje: przypisać do niej można tylko instancje tej klasy (albo jej podklas).

Częste błędy

• Deklarowanie pola i nieprzypisywanie go. TS2564 mówi ci, że pole byłoby undefined. Zainicjalizuj je, zamiast wyciszać błąd przez !.
• Przekazywanie metody jako funkcji zwrotnej. button.onclick = obj.handle gubi this. Użyj pola z funkcją strzałkową albo obj.handle.bind(obj).
• Oczekiwanie, że implements doda kod albo typy. Ono tylko sprawdza. Typy parametrów nadal wymagają adnotacji.
• Używanie instanceof z interfejsem. Interfejsy nie istnieją w czasie działania; sprawdź klasę albo użyj strażnika typu.
• Założenie, że typy walidują dane. Pole number przyjmuje w czasie kompilacji każdą liczbę, a w czasie działania cokolwiek z nieotypowanych danych.