Classes en TypeScript : champs, méthodes, getters et implements

Une classe TypeScript est une classe JavaScript avec des types : chaque champ est déclaré avec son type dans le corps de la classe, et les méthodes comme le constructeur reçoivent des paramètres et des valeurs de retour typés.

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

La sortie compilée est une classe JavaScript ordinaire sans les types : tout ce qui concerne les classes JavaScript reste donc valable. Ce qu'ajoute TypeScript se passe à la compilation : le dernier appel est refusé avant l'exécution du programme.

Déclarer des champs

Un champ doit être déclaré dans le corps de la classe avant que le constructeur puisse l'assigner. Assigner this.owner sans déclarer owner provoque l'erreur TS2339 (la propriété n'existe pas). Un champ avec un initialiseur voit son type inféré à partir de la valeur, comme une variable.

Avec strict activé, strictPropertyInitialization vérifie que chaque champ non optionnel reçoit une valeur. Cette classe en oublie deux :

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

console.log(new Profile());

Le compilateur signale les deux :

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.

Cette vérification existe parce que, sans elle, new Profile().name.toUpperCase() passerait la vérification des types puis planterait sur undefined. Corrigez chaque champ de l'une de ces quatre façons : donnez-lui un initialiseur, assignez-le dans le constructeur, rendez-le optionnel avec ?, ou écrivez name!: string quand un framework ou une méthode init() le définit plus tard. La dernière option désactive la vérification pour ce champ : utilisez-la avec parcimonie.

Méthodes et this

Les méthodes se typent comme des fonctions. Dans une méthode, this a le type de l'instance. Une méthode peut renvoyer this pour permettre le chaînage, et le type de retour suit automatiquement les sous-classes.

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

Une méthode perd son this quand on la détache de l'objet, un bug classique de JavaScript. TypeScript ne le détecte pas par défaut, mais il le fait si la méthode déclare un paramètre this. Ce paramètre est effacé de la sortie et ne sert qu'à protéger l'appel :

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

Le champ fonction fléchée fonctionne parce que chaque instance reçoit sa propre fonction, qui capture this. Le coût est une fonction par instance au lieu d'une méthode partagée sur le prototype.

Getters et setters

Les accesseurs get et set ressemblent à des propriétés vus de l'extérieur. Un getter sans setter est en lecture seule : y assigner une valeur est une erreur de compilation (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
}

Le compilateur refuse l'assignation, et si la vérification est contournée, l'exécution lève aussi une TypeError, car le fichier compilé s'exécute en mode strict (le compilateur émet "use strict" en haut du fichier). La RangeError du setter est une vérification à l'exécution que vous avez écrite vous-même. Le type number dit seulement que la valeur est un nombre ; il ne sait rien des plages de valeurs.

Membres statiques

Les champs et méthodes static appartiennent à la classe elle-même. Vous y accédez via le nom de la classe, pas via une instance. Un bloc static { } s'exécute une fois, quand la classe est définie.

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

Les membres statiques ne peuvent pas utiliser les paramètres de type de la classe : dans class Box<T>, un static empty: T provoque l'erreur TS2302, car il n'existe qu'un seul champ statique, partagé par chaque Box<string>, Box<number> et ainsi de suite.

Implémenter une interface

implements demande au compilateur de vérifier que la classe possède tout ce qu'exige une interface. Un membre manquant provoque l'erreur 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));

Une classe peut implémenter plusieurs interfaces : class Doc implements Printable, Serializable. Il y a deux choses que implements ne fait pas. Il ne type pas pour vous les paramètres des méthodes de la classe : check(s) { ... } dans une classe qui implémente check(s: string): boolean provoque toujours l'erreur TS7006 (Parameter 's' implicitly has an 'any' type), annotez-les donc. Et il ne laisse aucune trace à l'exécution : obj instanceof Shape est donc impossible.

Le private radius du constructeur est une propriété de paramètre : il déclare et assigne le champ en une seule étape. Voir constructeurs.

Une classe est aussi un type

Une déclaration de classe crée deux choses sous un même nom : une valeur (la fonction constructeur que vous appelez avec new) et un type (la forme d'une instance). Comme TypeScript compare les types par leur structure, tout objet ayant les mêmes membres publics correspond au type, même s'il n'a pas été créé par la classe.

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 }

L'objet simple passe la vérification des types mais n'est pas un Point à l'exécution : ({ x: 6, y: 8 }) instanceof Point vaut false. Une classe dotée d'un membre private ou #private empêche cela : seules les instances de cette classe (ou de ses sous-classes) lui sont assignables.

Erreurs fréquentes

• Déclarer un champ sans jamais l'assigner. TS2564 vous indique que le champ vaudrait undefined. Initialisez-le plutôt que de le faire taire avec !.
• Passer une méthode comme callback. button.onclick = obj.handle perd this. Utilisez un champ fonction fléchée ou obj.handle.bind(obj).
• Attendre de implements qu'il ajoute du code ou des types. Il ne fait que vérifier. Les types des paramètres ont toujours besoin d'annotations.
• Utiliser instanceof avec une interface. Les interfaces n'existent pas à l'exécution ; vérifiez une classe ou utilisez un type guard.
• Supposer que les types valident les données. Un champ number accepte n'importe quel nombre à la compilation, et absolument n'importe quoi venant de données non typées à l'exécution.