Classi in TypeScript: campi, metodi, getter e implements

Una classe TypeScript è una classe JavaScript con i tipi: ogni campo viene dichiarato con il suo tipo nel corpo della classe, e metodi e costruttore ricevono parametri e valori di ritorno tipizzati.

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

L'output compilato è una normale classe JavaScript senza i tipi, quindi tutto ciò che vale per le classi JavaScript resta valido. Ciò che aggiunge TypeScript avviene in compilazione: l'ultima chiamata viene rifiutata prima che il programma venga eseguito.

Dichiarare i campi

Un campo ha bisogno di una dichiarazione nel corpo della classe prima che il costruttore possa assegnarlo. Assegnare this.owner senza dichiarare owner è l'errore TS2339 (la proprietà non esiste). Un campo con un inizializzatore riceve il tipo dedotto dal valore, proprio come una variabile.

Con strict attivo, strictPropertyInitialization verifica che ogni campo non facoltativo riceva un valore. Questa classe se ne dimentica due:

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

console.log(new Profile());

Il compilatore li segnala entrambi:

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.

Il controllo esiste perché senza di esso new Profile().name.toUpperCase() supererebbe il controllo dei tipi e poi andrebbe in crash con undefined. Sistema ogni campo in uno di quattro modi: dagli un inizializzatore, assegnalo nel costruttore, rendilo facoltativo con ?, oppure scrivi name!: string quando un framework o un metodo init() lo imposta più tardi. L'ultimo disattiva il controllo per quel campo, quindi usalo con parsimonia.

Metodi e this

I metodi si tipizzano come le funzioni. Dentro un metodo, this ha il tipo dell'istanza. Un metodo può restituire this per permettere il concatenamento, e il tipo di ritorno segue automaticamente le sottoclassi.

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

Un metodo perde il suo this quando lo stacchi dall'oggetto, un classico bug di JavaScript. TypeScript non lo intercetta di default, ma lo fa se il metodo dichiara un parametro this. Quel parametro viene cancellato dall'output e protegge solo il punto della chiamata:

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

Il campo arrow funziona perché ogni istanza riceve la propria funzione che cattura this. Il costo è una funzione per istanza invece di un unico metodo condiviso sul prototipo.

Getter e setter

Gli accessor get e set sembrano proprietà dall'esterno. Un getter senza setter è di sola lettura: assegnargli un valore è un errore di compilazione (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
}

Il compilatore rifiuta l'assegnazione, e se il controllo viene aggirato anche il runtime lancia un TypeError, perché il file compilato gira in strict mode (il compilatore emette "use strict" in cima). Il RangeError nel setter è un controllo a runtime che hai scritto tu. Il tipo number dice solo che il valore è un numero; non sa nulla di intervalli.

Membri statici

I campi e i metodi static appartengono alla classe stessa. Li raggiungi tramite il nome della classe, non tramite un'istanza. Un blocco static { } viene eseguito una volta quando la classe viene definita.

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

I membri statici non possono usare i parametri di tipo della classe: in class Box<T>, un static empty: T è l'errore TS2302, perché esiste un solo campo statico, condiviso da ogni Box<string>, Box<number> e così via.

Implementare un'interfaccia

implements chiede al compilatore di verificare che la classe abbia tutto ciò che un'interfaccia richiede. Un membro mancante è l'errore 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));

Una classe può implementare più interfacce: class Doc implements Printable, Serializable. Ci sono due cose che implements non fa. Non tipizza al posto tuo i parametri dei metodi della classe: check(s) { ... } dentro una classe che implementa check(s: string): boolean è comunque l'errore TS7006 (Parameter 's' implicitly has an 'any' type), quindi annotali. E non lascia traccia a runtime, quindi obj instanceof Shape non è possibile.

Il private radius nel costruttore è una parameter property: dichiara e assegna il campo in un solo passaggio. Vedi costruttori.

Una classe è anche un tipo

Una dichiarazione di classe crea due cose con un solo nome: un valore (la funzione costruttrice che chiami con new) e un tipo (la forma di un'istanza). Dato che TypeScript confronta i tipi per struttura, qualsiasi oggetto con gli stessi membri pubblici si adatta al tipo, anche uno non creato dalla 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'oggetto semplice supera il controllo dei tipi ma a runtime non è un Point: ({ x: 6, y: 8 }) instanceof Point è false. Una classe con un membro private o #private lo impedisce: solo le istanze di quella classe (o delle sue sottoclassi) le sono assegnabili.

Errori comuni

• Dichiarare un campo e non assegnarlo mai. TS2564 ti sta dicendo che il campo sarebbe undefined. Inizializzalo invece di zittirlo con !.
• Passare un metodo come callback. button.onclick = obj.handle perde this. Usa un campo arrow function o obj.handle.bind(obj).
• Aspettarsi che implements aggiunga codice o tipi. Controlla soltanto. I tipi dei parametri vanno comunque annotati.
• Usare instanceof con un'interfaccia. Le interfacce non esistono a runtime; controlla una classe o usa una type guard.
• Pensare che i tipi validino i dati. Un campo number accetta qualsiasi numero in compilazione, e qualsiasi cosa da dati non tipizzati a runtime.