Классы в TypeScript: поля, методы, геттеры и implements

Класс TypeScript это класс JavaScript с типами: каждое поле объявляется с типом в теле класса, а методы и конструктор получают типизированные параметры и возвращаемые значения.

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

Скомпилированный результат это обычный класс JavaScript без типов, поэтому всё, что сказано о классах JavaScript, по-прежнему в силе. То, что добавляет TypeScript, происходит при компиляции: последний вызов отвергается ещё до запуска программы.

Объявление полей

Полю нужно объявление в теле класса, прежде чем конструктор сможет его присвоить. Присваивание this.owner без объявления owner это ошибка TS2339 (свойство не существует). Поле с инициализатором получает тип, выведенный из значения, как переменная.

При включённом strict параметр strictPropertyInitialization проверяет, что каждое необязательное поле получает значение. Этот класс забывает два:

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

console.log(new Profile());

Компилятор сообщает об обоих:

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.

Проверка существует потому, что без неё new Profile().name.toUpperCase() прошло бы проверку типов, а затем упало бы на undefined. Каждое поле можно исправить одним из четырёх способов: задать инициализатор, присвоить значение в конструкторе, сделать поле необязательным через ? или написать name!: string, если поле позже задаёт фреймворк или метод init(). Последний способ отключает проверку для этого поля, поэтому пользуйтесь им редко.

Методы и this

Методы типизируются как функции. Внутри метода this имеет тип экземпляра. Метод может вернуть this, чтобы можно было строить цепочки вызовов, и тип возврата автоматически следует за подклассами.

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

Метод теряет свой this, если его отделить от объекта; это классическая ошибка JavaScript. По умолчанию TypeScript её не ловит, но ловит, если метод объявляет параметр this. Этот параметр стирается из вывода и только охраняет место вызова:

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

Поле со стрелочной функцией работает, потому что каждый экземпляр получает собственную функцию, замыкающую this. Цена этого: по одной функции на экземпляр вместо одного общего метода в прототипе.

Геттеры и сеттеры

Аксессоры get и set снаружи выглядят как свойства. Геттер без сеттера доступен только для чтения: присваивание ему это ошибка компиляции (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
}

Компилятор отвергает присваивание, а если проверку обойти, во время выполнения тоже будет TypeError, потому что скомпилированный файл работает в строгом режиме (компилятор выводит "use strict" в начале). RangeError в сеттере это проверка времени выполнения, которую вы написали сами. Тип number говорит лишь, что значение является числом; о диапазонах он ничего не знает.

Статические члены

Поля и методы static принадлежат самому классу. К ним обращаются через имя класса, а не через экземпляр. Блок static { } выполняется один раз при определении класса.

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

Статические члены не могут использовать параметры типа класса: в class Box<T> поле static empty: T это ошибка TS2302, потому что статическое поле одно и общее для всех Box<string>, Box<number> и так далее.

Реализация интерфейса

implements просит компилятор проверить, что в классе есть всё, чего требует интерфейс. Отсутствующий член это ошибка 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));

Класс может реализовать несколько интерфейсов: class Doc implements Printable, Serializable. Двух вещей implements не делает. Он не типизирует за вас параметры методов класса: check(s) { ... } внутри класса, реализующего check(s: string): boolean, всё равно даёт ошибку TS7006 (Parameter 's' implicitly has an 'any' type), так что аннотируйте их. И он не оставляет следа во время выполнения, поэтому obj instanceof Shape невозможно.

private radius в конструкторе это свойство-параметр: оно объявляет и присваивает поле за один шаг. См. конструкторы.

Класс это ещё и тип

Объявление класса создаёт две вещи с одним именем: значение (функцию-конструктор, которую вызывают через new) и тип (структуру экземпляра). Поскольку TypeScript сравнивает типы по структуре, под этот тип подходит любой объект с теми же публичными членами, даже созданный не этим классом.

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 }

Обычный объект проходит проверку типов, но во время выполнения не является Point: ({ x: 6, y: 8 }) instanceof Point равно false. Класс с членом private или #private это пресекает: присвоить ему можно только экземпляры этого класса (или его подклассов).

Частые ошибки

• Объявить поле и никогда его не присвоить. TS2564 сообщает, что поле было бы undefined. Инициализируйте его, а не заглушайте через !.
• Передать метод как колбэк. button.onclick = obj.handle теряет this. Используйте поле со стрелочной функцией или obj.handle.bind(obj).
• Ожидать, что implements добавит код или типы. Он только проверяет. Типам параметров по-прежнему нужны аннотации.
• Использовать instanceof с интерфейсом. Интерфейсов во время выполнения нет; проверяйте класс или используйте защитник типа.
• Считать, что типы валидируют данные. Поле number при компиляции принимает любое число, а во время выполнения из нетипизированных данных вообще что угодно.