TypeScript Klassen: Felder, Methoden, Getter und implements

Eine TypeScript-Klasse ist eine JavaScript-Klasse mit Typen: Jedes Feld wird mit seinem Typ im Klassenrumpf deklariert, und Methoden und Konstruktor bekommen typisierte Parameter und Rückgabewerte.

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

Die kompilierte Ausgabe ist eine gewöhnliche JavaScript-Klasse ohne die Typen, daher gilt alles aus JavaScript-Klassen weiterhin. Was TypeScript hinzufügt, passiert beim Kompilieren: Der letzte Aufruf wird abgelehnt, bevor das Programm läuft.

Felder deklarieren

Ein Feld braucht eine Deklaration im Klassenrumpf, bevor der Konstruktor es zuweisen kann. this.owner zuzuweisen, ohne owner zu deklarieren, ist der Fehler TS2339 (Eigenschaft existiert nicht). Ein Feld mit Initialisierer bekommt seinen Typ aus dem Wert abgeleitet, genau wie eine Variable.

Mit aktivem strict prüft strictPropertyInitialization, dass jedes nicht optionale Feld einen Wert bekommt. Diese Klasse vergisst zwei:

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

console.log(new Profile());

Der Compiler meldet beide:

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.

Die Prüfung gibt es, weil sonst new Profile().name.toUpperCase() die Typprüfung bestehen und dann an undefined abstürzen würde. Behebe jedes Feld auf eine von vier Arten: Gib ihm einen Initialisierer, weise es im Konstruktor zu, markiere es mit ? als optional oder schreibe name!: string, wenn ein Framework oder eine Methode init() es später setzt. Die letzte Variante schaltet die Prüfung für dieses Feld ab, setze sie also sparsam ein.

Methoden und this

Methoden werden wie Funktionen typisiert. In einer Methode hat this den Typ der Instanz. Eine Methode kann this zurückgeben, um Verkettung zu ermöglichen, und der Rückgabetyp folgt Unterklassen automatisch.

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

Eine Methode verliert ihr this, wenn du sie vom Objekt abziehst, ein klassischer JavaScript-Bug. TypeScript findet das standardmäßig nicht, wohl aber, wenn die Methode einen this-Parameter deklariert. Dieser Parameter wird aus der Ausgabe entfernt und schützt nur die Aufrufstelle:

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

Das Arrow-Feld funktioniert, weil jede Instanz ihre eigene Funktion bekommt, die this einschließt. Der Preis ist eine Funktion pro Instanz statt einer gemeinsamen Methode auf dem Prototyp.

Getter und Setter

Accessoren mit get und set sehen von außen wie Eigenschaften aus. Ein Getter ohne Setter ist nur lesbar: Ihm etwas zuzuweisen ist ein Compilerfehler (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
}

Der Compiler lehnt die Zuweisung ab, und wird die Prüfung umgangen, wirft auch die Laufzeit einen TypeError, weil die kompilierte Datei im Strict Mode läuft (der Compiler setzt "use strict" an den Anfang). Der RangeError im Setter ist eine Prüfung zur Laufzeit, die du selbst geschrieben hast. Der Typ number sagt nur, dass der Wert eine Zahl ist; über Wertebereiche weiß er nichts.

Statische Member

static-Felder und Methoden gehören zur Klasse selbst. Du erreichst sie über den Klassennamen, nicht über eine Instanz. Ein Block static { } läuft einmal, wenn die Klasse definiert wird.

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

Statische Member können die Typparameter der Klasse nicht verwenden: In class Box<T> ist ein static empty: T der Fehler TS2302, weil es nur ein statisches Feld gibt, das sich jedes Box<string>, Box<number> und so weiter teilt.

Ein Interface implementieren

implements bittet den Compiler zu prüfen, dass die Klasse alles hat, was ein Interface verlangt. Ein fehlender Member ist der Fehler 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));

Eine Klasse kann mehrere Interfaces implementieren: class Doc implements Printable, Serializable. Zwei Dinge tut implements nicht. Es typisiert die Methodenparameter der Klasse nicht für dich: check(s) { ... } in einer Klasse, die check(s: string): boolean implementiert, ist weiterhin der Fehler TS7006 (Parameter 's' implicitly has an 'any' type), annotiere sie also. Und es hinterlässt zur Laufzeit keine Spur, obj instanceof Shape ist also nicht möglich.

Das private radius im Konstruktor ist eine Parameter Property: Sie deklariert und weist das Feld in einem Schritt zu. Siehe Konstruktoren.

Eine Klasse ist auch ein Typ

Eine Klassendeklaration erzeugt zwei Dinge mit einem Namen: einen Wert (die Konstruktorfunktion, die du mit new aufrufst) und einen Typ (die Form einer Instanz). Weil TypeScript Typen nach Struktur vergleicht, passt jedes Objekt mit denselben öffentlichen Membern zum Typ, auch eines, das nicht von der Klasse erzeugt wurde.

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 }

Das einfache Objekt besteht die Typprüfung, ist zur Laufzeit aber kein Point: ({ x: 6, y: 8 }) instanceof Point ist false. Eine Klasse mit einem Member private oder #private verhindert das: Nur Instanzen dieser Klasse (oder ihrer Unterklassen) sind ihr zuweisbar.

Häufige Fehler

• Ein Feld deklarieren und nie zuweisen. TS2564 sagt dir, dass das Feld undefined wäre. Initialisiere es, statt den Fehler mit ! zum Schweigen zu bringen.
• Eine Methode als Callback übergeben. button.onclick = obj.handle verliert this. Nimm ein Arrow-Feld oder obj.handle.bind(obj).
• Erwarten, dass implements Code oder Typen hinzufügt. Es prüft nur. Parametertypen brauchen weiterhin Annotationen.
• instanceof mit einem Interface verwenden. Interfaces existieren zur Laufzeit nicht; prüfe eine Klasse oder nimm einen Type Guard.
• Annehmen, dass Typen Daten validieren. Ein Feld vom Typ number akzeptiert beim Kompilieren jede Zahl und zur Laufzeit aus untypisierten Daten überhaupt alles.