Бесплатный курс по TypeScript. Зарегистрируйтесь для отслеживания прогресса →

TypeScript: Наследование

В этом уроке мы разберем наследование. Это механизм, который позволяет создавать подклассы на основе уже существующих классов. Подклассы наследуют свойства и методы родительского класса и могут расширять их.

В TypeScript наследование реализуется с помощью ключевого слова extends:

// В TypeScript уже включен класс File, поэтому определим свой класс файла с именем CustomFile
class CustomFile {
  constructor(public name: string, public size: number) {}
}

class ImageCustomFile extends CustomFile {
  constructor(name: string, size: number, public width: number, public height: number) {
    super(name, size);
  }
}

Наследоваться можно только от одного класса. Но цепочка наследования может быть бесконечной. Например, класс ImageCustomFile наследуется от класса CustomFile, который может наследоваться от другого класса и так далее.

Вся цепочка наследования образует иерархию классов. Так как классы могут использоваться и как типы, иерархия классов полностью совпадает с иерархией типов. Подкласс является подтипом базового класса и может использоваться вместо него, при этом задавать более строгие ограничения.

const file = new CustomFile('open-world.jpeg', 1000);
const image = new ImageCustomFile('open-world.jpeg', 1000, 100, 100);

const showImage = (image: ImageCustomFile) => {
...
};
showImage(file); // Error

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

  • Типы параметров переопределенного метода бивариантны
  • Тип возвращаемого значения переопределенного метода ковариантен

Родительский метод принимает string и возвращает string. Переопределенный метод должен иметь более широкий или более узкий тип, например, string | null или 'some string'. Возвращать же должен более узкий тип, например, 'some string':

class CustomFileFactory {
  createCustomFile(name: string, size: number): CustomFile {
    return new CustomFile(name, size);
  }
}

class ImageCustomFileFactory1 extends CustomFileFactory {
  createCustomFile(name: string, size: number): ImageCustomFile { // OK
    return new ImageCustomFile(name, size, 100, 100);
  }
}

class ImageCustomFileFactory2 extends CustomFileFactory {
  createCustomFile(name: 'file', size: number): CustomFile { // OK
    return new ImageCustomFile(name, size, 100, 100);
  }
}  

class ImageCustomFileFactory3 extends CustomFileFactory {
  createCustomFile(name: number, size: number): CustomFile { // Error!
    return new ImageCustomFile(name, size, 100, 100);
  }
}


class ImageCustomFileFactory3 extends CustomFileFactory {
  createCustomFile(name: string, size: number): {} { // Error!
    return new ImageCustomFile(name, size, 100, 100);
  }
}

Задание

Реализуйте класс HttpError, который должен наследоваться от встроенного класса Error и принимать первым параметром код ошибки, а вторым — message. Также реализуйте классы NotFoundError, UnauthorizedError, ForbiddenError. Каждый из них должен наследоваться от класса HttpError и иметь свойство status, которое равно коду ошибки и message — сообщение, передающееся в базовый класс. Коды ошибок: 404, 401, 403.

import { NotFoundError } from './errors';

const error = new NotFoundError('Not Found');
console.log(error.status); // 404
console.log(error.message); // Not Found
Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

  • Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

Полезное


Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics
Если вы столкнулись с трудностями и не знаете, что делать, задайте вопрос в нашем большом и дружном сообществе