Класс как тип и как значение

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

Начнём со строки, которая выглядит тавтологией, а на деле содержит два разных Point.

ts

class Point {
  x: number;
  y: number;
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}
const p: Point = new Point(3, 4);
console.log(typeof Point);
console.log(p.x, p.y);

страница примера

Сначала предположите, что выведет код

После двоеточия имя Point — это тип: «объект с полями x и y, каким его делает этот класс». После new то же имя — значение: обычная функция, что typeof и подтверждает. Компилятор держит два независимых пространства имён, и объявление класса занимает имя сразу в обоих.

Пока каждое имя стоит на своей стороне, разница незаметна. Она вылезает, когда стороны путают. Что скажет компилятор здесь и что попадёт в консоль?

ts

class Point {
  x = 0;
  y = 0;
}
const wrong: Point = Point;
console.log(wrong.x);

страница примера

Сначала предположите, что выведет код

TS2739: «В типе "typeof Point" отсутствуют следующие свойства из типа "Point": x, y». Главное в этой фразе — имя typeof Point: так компилятор называет тип самого класса. Полей у него правда нет, они появляются только после new. И заметьте, что консоль всё равно напечатала undefined: диагностика выполнение не отменяет.

Подсказка на первое время: слева от двоеточия читается значение, справа — тип. Имя класса означает разное в зависимости от того, с какой стороны оно стоит.

Типы внутри класса ставят в трёх местах: у полей, у параметров конструктора и методов, у возвращаемых значений. Поле со значением по умолчанию аннотировать не обязательно — работает тот же вывод типов, что и у обычной переменной.

ts

class Article {
  readonly slug: string;
  title = "Без названия"; // string выведен из значения
  cover?: string;
  // пустой массив сам по себе ничего не говорит о содержимом
  tags: string[] = [];
  constructor(slug: string) {
    this.slug = slug;
  }
  addTag(tag: string): void {
    this.tags.push(tag);
  }
}
const a = new Article("class-types");
a.addTag("классы");
console.log(a.title, a.tags, a.cover);

страница примера

Сначала предположите, что выведет код

cover? — необязательное поле: до присвоения там undefined, и тип у него string | undefined. slug объявлен без значения, но присвоен в конструкторе — этого компилятору достаточно; что будет, если забыть и то и другое, разбирает следующая статья главы.

Теперь нарушим два обещания сразу. Сколько будет диагностик — и что напечатает вторая строка вывода?

ts

class Config {
  readonly host: string;
  port = 443;
  constructor(host: string) {
    this.host = host;
  }
}
const c = new Config("java-script.pro");
c.port = "443";
c.host = "example.com";
console.log(c.host);
console.log(c.port + 1);

страница примера

Сначала предположите, что выведет код

TS2322 «Тип "string" не может быть назначен для типа "number"» и TS2540 «Не удается задать значение для "host", так как это свойство, доступное только для чтения». А дальше самое поучительное: оба присваивания всё равно прошли. readonly — обещание компилятору, а не замок в объекте; в port легла строка, и + 1 честно склеил её в "4431". Ровно та ошибка, которую типы и должны были предотвратить, — если бы вы их послушали.

Имя класса в позиции типа не означает «объект, созданный именно этим классом». Оно означает форму: набор полей и методов. Всё, что по форме подходит, компилятор пропустит.

ts

class Point {
  x = 0;
  y = 0;
}
function length(point: Point): number {
  return Math.hypot(point.x, point.y);
}
console.log(length(new Point()));
console.log(length({ x: 3, y: 4 }));
const fake: Point = { x: 3, y: 4 };
console.log(fake instanceof Point);

страница примера

Сначала предположите, что выведет код

Литерал прошёл в функцию, которая просит Point, и посчитал пятёрку. А instanceof тут же ответил false: по форме объект подходит, по происхождению — нет. Это та же структурная типизация, что и у обычных объектов из третьей главы, просто теперь форму описывает класс.

Следствие бывает неприятным: два несвязанных класса с одинаковыми полями взаимозаменяемы.

ts

class Meters {
  value: number;
  constructor(value: number) {
    this.value = value;
  }
}
class Seconds {
  value: number;
  constructor(value: number) {
    this.value = value;
  }
}
function show(m: Meters): void {
  console.log(m.value + " м");
}
show(new Seconds(30));

страница примера

Сначала предположите, что выведет код

Ни наследования, ни общего интерфейса — и ни одной диагностики. Если такое смешение опасно, формы нужно развести; как это делают приватным полем, разбирает статья про implements и приватность.

Совпадать должны все члены, а не только данные. Метод в классе сразу поднимает планку.

ts

class Timer {
  start = 0;
  tick(): number {
    this.start += 1;
    return this.start;
  }
}
const fake: Timer = { start: 0 };
console.log(fake.tick());

страница примера

Сначала предположите, что выведет код

TS2741: «Свойство "tick" отсутствует в типе "{ start: number; }" и является обязательным в типе "Timer"». Диагностика называет обе формы целиком — и ту, что дали, и ту, что ждали. А выполнение, как всегда, идёт дальше и падает настоящим TypeError.

Иногда в функцию нужно передать не экземпляр, а сам класс — чтобы она сама вызвала new. Первая попытка почти всегда выглядит так.

ts

class Dog {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  speak(): string {
    return this.name + " говорит гав";
  }
}
function summon(Factory: Dog, name: string): Dog {
  return new Factory(name);
}
console.log(summon(Dog, "Рекс").speak());

страница примера

Сначала предположите, что выведет код

Две диагностики, и обе по делу. TS2351 «Это выражение не может быть построено. Тип "Dog" не содержит сигнатуры конструкции» — экземпляр нельзя вызвать через new. TS2345 заходит с другой стороны: «Аргумент типа "typeof Dog" нельзя назначить параметру типа "Dog"». Компилятор сам произнёс нужное слово — остаётся вписать его в аннотацию.

ts

class Dog {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  speak(): string {
    return this.name + " говорит гав";
  }
}
// параметр — сам класс, поэтому typeof
function summon(Factory: typeof Dog, name: string): Dog {
  return new Factory(name);
}
console.log(summon(Dog, "Рекс").speak());

страница примера

Сначала предположите, что выведет код

typeof Dog в позиции типа — это «тип самого класса»: конструктор с такой сигнатурой плюс все статические члены. С typeof из части I у него общее только написание: тот работает в рантайме и возвращает строку, этот вычисляется компилятором и до браузера не доезжает. Что имеется в виду, определяет позиция — снова та же развилка «значение или тип».

Запись	Что означает	Что подойдёт
`Dog` после двоеточия	экземпляр класса	`new Dog("Рекс")`, любой объект такой формы
`Dog` в позиции значения	сам класс, функция-конструктор	только само имя
`typeof Dog`	тип класса: конструктор и статика	`Dog`, но не экземпляр
`new (name: string) => Dog`	любой конструктор с такой сигнатурой	`Dog` и любой другой подходящий класс

Разделение на две стороны видно и на статических членах: они принадлежат классу, а не экземпляру, — значит, в типе экземпляра их нет.

ts

class Temperature {
  celsius: number;
  static zero = -273.15;
  constructor(celsius: number) {
    this.celsius = celsius;
  }
  static fromFahrenheit(f: number): Temperature {
    return new Temperature((f - 32) / 1.8);
  }
}
const t = Temperature.fromFahrenheit(212);
console.log(t.celsius);
console.log(t.zero);

страница примера

Сначала предположите, что выведет код

TS2576 не просто ругается, а подсказывает: «Свойство "zero" отсутствует в типе "Temperature". Вы хотели обратиться к статическому элементу "Temperature.zero"?». Статика живёт в typeof Temperature, поля и методы — в Temperature. И снова консоль договаривает: undefined, потому что в рантайме у экземпляра этого свойства действительно нет.

typeof Dog требует именно этот класс. Если подойдёт любой конструктор нужной формы, тип пишут напрямую — со словом new внутри.

ts

class Dog {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  speak(): string {
    return this.name + " говорит гав";
  }
}
type DogMaker = new (name: string) => Dog;
const registry: DogMaker[] = [Dog];
for (const Factory of registry) {
  console.log(new Factory("Бим").speak());
}
// класс — значение, у него есть привычные свойства функции
console.log(Dog.name);

страница примера

Сначала предположите, что выведет код

Такая запись называется сигнатурой конструирования — той самой, которой, по словам TS2351, не хватало типу экземпляра.

Всё, что мы расставляли, до браузера не доедет: аннотации, readonly, вопросительный знак у поля — разметка для компилятора. После сборки от класса остаётся ровно та функция-конструктор, которую вы знаете из части I. Отсюда самая коварная ошибка главы — и здесь компилятор промолчит.

ts

class Dog {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  speak(): string {
    return this.name + " говорит гав";
  }
}
const ghost = {} as Dog;
console.log(ghost.name);
console.log(ghost.speak());

страница примера

Сначала предположите, что выведет код

Ни одной диагностики — и TypeError: ghost.speak is not a function на исполнении. as не преобразует объект, а обещает компилятору, что тип уже такой; проверять он после этого не станет. Пустой объект получил тип Dog, но не получил ни поля, ни метода — прототипа-то нет. Подробный разбор as и его законных применений ждёт в статье «as и @ts-expect-error: когда вы врёте компилятору» из главы про границы программы.

Обратная сторона у этого хорошая. Класс — редкая конструкция, которая даёт и тип, и проверку в рантайме сразу: interface после компиляции исчезает бесследно, а класс остаётся значением, и про него можно спросить.

ts

interface Cat {
  name: string;
}
class Dog {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}
const pet: Dog | Cat = new Dog("Рекс");
console.log(pet instanceof Dog);
const stray: Dog | Cat = { name: "Мурка" };
console.log(stray instanceof Dog);

страница примера

Сначала предположите, что выведет код

Класс можно записать выражением и положить в переменную — он ведь значение. Но тогда имени-типа не появляется, и попытка использовать переменную как тип даёт отдельную диагностику.

ts

const Counter = class {
  value = 0;
  next(): number {
    return (this.value += 1);
  }
};
const first = new Counter();
console.log(first.next(), first.next());
const second: Counter = first;
console.log(second.value);

страница примера

Сначала предположите, что выведет код

TS2749: «"Counter" относится к значению, но здесь используется как тип. Возможно, вы имели в виду "typeof Counter"?». Подсказку тут стоит читать с осторожностью: typeof Counter — это тип класса, а нам нужен тип экземпляра. Достать его из выражения класса помогают утилиты из девятой главы; проще же объявить класс обычным class Counter { … } и получить оба имени бесплатно.

Одно объявление class заводит два имени: значение — функцию-конструктор — и тип экземпляра.
Имя класса после двоеточия означает экземпляр; тип самого класса записывается как typeof Класс.
Статические члены живут в typeof Класс, поля и методы — в типе экземпляра; на путанице ловит TS2576.
Тип экземпляра структурен: подходящий по форме литерал компилятор пропустит, хотя instanceof ответит false.
Аннотации, readonly и необязательность стираются при компиляции — от класса остаётся обычный JavaScript.
as не создаёт экземпляр, а только обещает тип: компилятор промолчит, а TypeError прилетит на исполнении.

1/4Класс Point объявлен с полями x и y. Что произойдёт со строкой const wrong: Point = Point;?

2/4Функция принимает параметр типа Point — это класс с полями x и y и без методов. В неё передали литерал { x: 3, y: 4 }. Что будет?

3/4В функцию нужно передать сам класс Dog, чтобы внутри вызвать new. Как объявить параметр?

4/4У класса Temperature есть статическое поле zero. Что даст обращение t.zero у экземпляра?

Расставить типы в классе

Класс написан на чистом JavaScript и работает, но компилятор выдаёт четыре диагностики TS7006. Проставьте типы так, чтобы диагностик не осталось, а поведение не изменилось. Подсказка: параметры колбэка в reduce трогать не придётся — они выведутся сами, как только станет известен тип массива.

ts

class Cart {
  items;
  constructor(items) {
    this.items = items;
  }
  add(price) {
    this.items.push(price);
  }
  get total() {
    return this.items.reduce((sum, n) => sum + n, 0);
  }
}
const cart = new Cart([100, 200]);
cart.add(50);
console.log(cart.total); // 350

страница примера

Сначала предположите, что выведет код

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

tsлистинг · не запускается

class Cart {
  items: number[];
  constructor(items: number[]) {
    this.items = items;
  }
  add(price: number): void {
    this.items.push(price);
  }
  get total(): number {
    return this.items.reduce((sum, n) => sum + n, 0);
  }
}
const cart = new Cart([100, 200]);
cart.add(50);
console.log(cart.total); // 350

class Cart {
  items: number[];
  constructor(items: number[]) {
    this.items = items;
  }
  add(price: number): void {
    this.items.push(price);
  }
  get total(): number {
    return this.items.reduce((sum, n) => sum + n, 0);
  }
}
const cart = new Cart([100, 200]);
cart.add(50);
console.log(cart.total); // 350

Две диагностики про sum и n исчезли сами: как только items стал number[], типы параметров колбэка вывелись из сигнатуры reduce.

Фабрика, которая принимает класс

Функция должна создать несколько роботов, получив класс аргументом. Код работает, но компилятор недоволен: TS2351 на new Factory(i) и TS2345 на вызове. Исправьте одну аннотацию.

ts

class Robot {
  id: number;
  constructor(id: number) {
    this.id = id;
  }
  hello(): string {
    return "робот " + this.id;
  }
}
function makeMany(Factory: Robot, count: number): Robot[] {
  const list: Robot[] = [];
  for (let i = 1; i <= count; i++) {
    list.push(new Factory(i));
  }
  return list;
}
console.log(makeMany(Robot, 2).map((r) => r.hello()));

страница примера

Сначала предположите, что выведет код

Параметр Factory — это сам класс, а не экземпляр, поэтому его тип пишется как typeof Robot. Всё остальное остаётся: возвращает функция именно экземпляры, и там Robot[] уже верно.

tsлистинг · не запускается

function makeMany(Factory: typeof Robot, count: number): Robot[] {
  const list: Robot[] = [];
  for (let i = 1; i <= count; i++) {
    list.push(new Factory(i));
  }
  return list;
}
console.log(makeMany(Robot, 2).map((r) => r.hello())); // ["робот 1", "робот 2"]

function makeMany(Factory: typeof Robot, count: number): Robot[] {
  const list: Robot[] = [];
  for (let i = 1; i <= count; i++) {
    list.push(new Factory(i));
  }
  return list;
}
console.log(makeMany(Robot, 2).map((r) => r.hello())); // ["робот 1", "робот 2"]

Если бы функция должна была принимать не только Robot, но и любой класс с конструктором (id: number), вместо typeof Robot подошла бы сигнатура конструирования new (id: number) => Robot.

Убрать as

Компилятор молчит, а код падает с TypeError. Найдите причину и почините — не заглушая проблему, а получив настоящий экземпляр. Аннотации в классе менять не нужно.

ts

class Session {
  user: string;
  constructor(user: string) {
    this.user = user;
  }
  greet(): string {
    return "привет, " + this.user;
  }
}
const restored = { user: "Рико" } as Session;
console.log(restored.greet());

страница примера

Сначала предположите, что выведет код

as ничего не создаёт: он лишь велит компилятору считать литерал сессией. Метода greet в объекте нет и не появится — он живёт в прототипе, а прототип даёт только new.

tsлистинг · не запускается

class Session {
  user: string;
  constructor(user: string) {
    this.user = user;
  }
  greet(): string {
    return "привет, " + this.user;
  }
}
const raw = { user: "Рико" };
const restored = new Session(raw.user);
console.log(restored.greet()); // привет, Рико

class Session {
  user: string;
  constructor(user: string) {
    this.user = user;
  }
  greet(): string {
    return "привет, " + this.user;
  }
}
const raw = { user: "Рико" };
const restored = new Session(raw.user);
console.log(restored.greet()); // привет, Рико

Общее правило: данные извне — это данные, а не экземпляры. Класс из них собирают конструктором, и заодно появляется место, куда положить проверку входа.

Класс как тип и как значение

Видеоразбор темы за 5–7 минут

Одно объявление, два имениСлева от двоеточия и справа — разные Point

Поля: аннотация, вывод, необязательностьГде внутри класса ставятся типы

Тип экземпляра — это формаПочему литерал проходит вместо экземпляра

typeof КлассТип конструктора и статическая сторона

Что доживёт до рантаймаКомпилятор молчит, а код падает

Итогошпаргалка по теме

Проверьте себявопросы по теме

Задачизадачи с решениями

Расставить типы в классе

Фабрика, которая принимает класс

Убрать as