TypeScript: Абстрактные классы

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

Абстрактные классы хоть и не могут быть созданы напрямую, но могут быть наследованы и указать явно, какой метод должен быть реализован в наследниках:

abstract class File {
  protected name: string;
  protected size: number;
  constructor(name: string, size: number) {
    this.name = name;
    this.size = size;
  }

  sizeInKb(): number {
    return this.size / 1024;
  }
}

class ImageFile extends File {
  constructor(name: string, size: number) {
    super(name, size);
  }
}

Чтобы выносить из классов общую часть кода, абстрактные классы активно используются для построения архитектуры приложения и фреймворков. Например, в React есть класс Component, который может быть представлен как абстрактный класс. Мы не можем создать его напрямую, но он требует от наследников реализации метода render. Это позволяет создавать компоненты, которые будут рендериться при инициализации:

abstract class Component {
  abstract render(): void;

  constructor() {
    this.render();
  }
}

Задание

Создайте абстрактный класс Clock, который будет содержать общую логику для классов часов с разными форматами вывода времени: 12-часовой и 24-часовой.

В общей логике должно быть хранение данных: часы hours, минуты minutes и секунды seconds. Так же в общую логику входит метод tick(), который при каждом вызове увеличивает секунду на единицу. Если секунда увеличивается до значения 60, то увеличивается минута на 1, а секунда сбрасывается до 0. То же самое с минутами и часами: если значение минут увеличивается до 60, то увеличивается значение текущего часа, а минуты сбрасываются до 0. Если значение часа увеличивается до 24, то происходит сброс этого значения до 0.

Начальное значение времени задается при создании объекта. Первым параметром в конструктор передается текущий час, вторым минуты, третьим секунды.

Абстрактный класс Clock должен требовать от своих наследников реализацию метода render().

// 24-часовой формат
class Clock24 extends Clock {
  render(): string {
    return `${this.hours.toString().padStart(2, '0')} : ${this.minutes.toString().padStart(2, '0')}`;
  }
}

const clock24 = new Clock24(23, 59, 59);
console.log(clock24.render()); // => '23 : 59'
clock24.tick();
console.log(clock24.render()); // => '00 : 00'

// 12-часовой формат
class Clock12 extends Clock {
  render(): string {
    const timeType = this.hours * 1000 + this.minutes + this.seconds < 12000 ? 'AM' : 'PM';
    const currentHour = this.hours % 12;
    return `${currentHour.toString().padStart(2, '0')} : ${this.minutes.toString().padStart(2, '0')} ${timeType}`;
  }
}

const clock12 = new Clock12(23, 59, 59);
console.log(clock12.render()); // => '11 : 59 PM'
clock12.tick();
console.log(clock12.render()); // => '00 : 00 AM'

Полезное

• Когда использовать абстрактные классы в TypeScript

Определения

• Абстрактный класс — это класс, который не может быть создан напрямую. Он предназначен только для наследования. Для создания абстрактного класса используется ключевое слово abstract.