Наследование классов TypeScript (Inheritance)

Наследование классов

Одним из основных принципов объектно-ориентированного программирования является "наследование классов". "Наследование" в объектно-ориентированных языках позволяет создать основной класс, а затем использовать его для создания новых классов с унаследованием свойств и методов. Методы новых созданных классов можно переопределять или расширять.

Мы уже проходили наследование классов в одном из уроков JavaScript SE6 https://github.com/g1er/Andrew/issues/12

В TypeScript так же как и в JS ES6 это происходит при помощи оператора "extend".

Тут имеется описание наследования TypeScript с примерами на русском языке: http://typescript-lang.ru/docs/Classes.html#%D0%9D%D0%B0%D1%81%D0%BB%D0%B5%D0%B4%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5

Рассмотрим описание из приведенной выше ссылки:

class Animal {
    name: string;
    constructor(theName: string) { this.name = theName; }
    move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}
class Snake extends Animal {
    constructor(name: string) { super(name); }
    move(distanceInMeters = 5) {
        console.log("Slithering...");
        super.move(distanceInMeters);
    }
}

Рассмотрим детально: 1) сначало создаем основной класс Animal, который имеет: а) свойство name: string б) метод move(distanceInMeters: number = 0) {..} который сбрасывает сообщение в консоль.

Обращаю внимание на backtick символ в примере - "обратная ковычка" - кнопка находиться слева наверху , под кнопкой "Esc". Если между обратными ковычками поместить любой текст и переменную окруженную фигурными скобками ${myVar} со знаком доллара перед скобками как в примере console.log(some text ${myVar}) , то содержимое вместе с текстом и значением переменной будет выведено в консоль.

Как видешь внутри метода move имеется параметр, которому присваивается значение по #умолчанию distanceInMeters: number = 0. Это такой синтаксис который означает что, если в метод move не будет передано никакого параметра, то значение параметру будет присвоено по умолчанию 0 (такая возможность в TypeScript присваивать значение параметра по умолчанию).

в) constructor: constructor(theName: string) { this.name = theName; } Который определяет значение свойства класса name

2) Snake extends Animal создает новый класс Snake на основе основного класса Animal, при этом он унаследует свойство и метод: а) свойство name автоматически унаследует значение, которое определяется в конструкторе основного класса (см. в п. б подробности как определяется значения метода в конструкторе) б) в конструкторе (так же как и в JS ES6) мы можем использовать оператор super(name), который передает параметр в конструктор основного класса, где и произойдет определение внутреннего свойства name внутри конструктора в) метод move так же унаследован из основного класса, однако мы расширяем его добавив дополнительно console.log("Slithering..."); , и для унаследованной части передаем методу основого класса параметр при помощи super.move(distanceInMeters);. Кроме того мы меняем значение параметра "по-умолчанию" (distanceInMeters = 5) :

   move(distanceInMeters = 5) {
        console.log("Slithering...");
        super.move(distanceInMeters);
    }

g1er / Andrew

Наследование классов TypeScript (Inheritance) #27

Наследование классов