Classes em TypeScript: campos, métodos, getters e implements

Uma classe TypeScript é uma classe JavaScript com tipos: cada campo é declarado com o tipo dele no corpo da classe, e os métodos e o construtor recebem parâmetros e valores de retorno tipados.

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

A saída compilada é uma classe JavaScript comum sem os tipos, então tudo o que vale para classes em JavaScript continua valendo. O que o TypeScript acrescenta acontece em tempo de compilação: a última chamada é rejeitada antes de o programa rodar.

Declarando campos

Um campo precisa de uma declaração no corpo da classe antes que o construtor possa atribuí-lo. Atribuir this.owner sem declarar owner gera o erro TS2339 (a propriedade não existe). Um campo com inicializador tem o tipo inferido a partir do valor, como uma variável.

Com strict ligado, o strictPropertyInitialization verifica que todo campo não opcional recebe um valor. Esta classe esquece dois:

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

console.log(new Profile());

O compilador aponta os dois:

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.

A verificação existe porque, sem ela, new Profile().name.toUpperCase() passaria na verificação de tipos e quebraria com undefined. Corrija cada campo de um de quatro jeitos: dê a ele um inicializador, atribua-o no construtor, marque-o como opcional com ?, ou escreva name!: string quando um framework ou um método init() o define depois. A última opção desliga a verificação para aquele campo, então use com moderação.

Métodos e this

Métodos são tipados como funções. Dentro de um método, o this tem o tipo da instância. Um método pode retornar this para permitir encadeamento, e o tipo de retorno acompanha as subclasses automaticamente.

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

Um método perde o this quando você o tira do objeto, um bug clássico do JavaScript. O TypeScript não pega isso por padrão, mas pega se o método declarar um parâmetro this. Esse parâmetro é apagado da saída e só protege o local da chamada:

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

O campo arrow function funciona porque cada instância recebe a própria função, que captura o this. O custo é uma função por instância, em vez de um único método compartilhado no protótipo.

Getters e setters

Os acessores get e set parecem propriedades vistos de fora. Um getter sem setter é só leitura: atribuir a ele é erro de compilação (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
}

O compilador rejeita a atribuição e, se a verificação for contornada, o runtime também lança um TypeError, porque o arquivo compilado roda em strict mode (o compilador gera "use strict" no topo). O RangeError no setter é uma verificação de tempo de execução que você mesmo escreveu. O tipo number só diz que o valor é um número; ele não sabe nada de intervalos.

Membros estáticos

Campos e métodos static pertencem à própria classe. Você os acessa pelo nome da classe, não por uma instância. Um bloco static { } roda uma vez, quando a classe é definida.

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

Membros estáticos não podem usar os type parameters da classe: em class Box<T>, um static empty: T gera o erro TS2302, porque existe um único campo estático, compartilhado por todo Box<string>, Box<number> e assim por diante.

Implementando uma interface

implements pede ao compilador para verificar que a classe tem tudo o que uma interface exige. Um membro faltando gera o erro 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));

Uma classe pode implementar várias interfaces: class Doc implements Printable, Serializable. Há duas coisas que o implements não faz. Ele não tipa os parâmetros dos métodos da classe para você: check(s) { ... } dentro de uma classe que implementa check(s: string): boolean continua gerando o erro TS7006 (Parameter 's' implicitly has an 'any' type), então anote-os. E ele não deixa rastro em tempo de execução, então obj instanceof Shape não é possível.

O private radius no construtor é uma parameter property: declara e atribui o campo em um passo só. Veja construtores.

Uma classe também é um tipo

Uma declaração de classe cria duas coisas com um nome só: um valor (a função construtora que você chama com new) e um tipo (o formato de uma instância). Como o TypeScript compara tipos pela estrutura, qualquer objeto com os mesmos membros públicos se encaixa no tipo, mesmo que não tenha sido criado pela 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 }

O objeto simples passa na verificação de tipos, mas não é um Point em tempo de execução: ({ x: 6, y: 8 }) instanceof Point é false. Uma classe com um membro private ou #private impede isso: só instâncias daquela classe (ou das subclasses) podem ser atribuídas a ela.

Erros comuns

• Declarar um campo e nunca atribuí-lo. O TS2564 está dizendo que o campo seria undefined. Inicialize-o em vez de silenciar com !.
• Passar um método como callback. button.onclick = obj.handle perde o this. Use um campo arrow function ou obj.handle.bind(obj).
• Esperar que o implements acrescente código ou tipos. Ele só verifica. Os tipos dos parâmetros continuam precisando de anotação.
• Usar instanceof com uma interface. Interfaces não existem em tempo de execução; verifique uma classe ou use um type guard.
• Achar que os tipos validam dados. Um campo number aceita qualquer número em tempo de compilação, e qualquer coisa vinda de dados sem tipo em tempo de execução.