TypeScript - Inheritance

[Last Updated: Sep 13, 2018]

In object-oriented programming, inheritance is a mechanism of extending an existing class to a new subclass.

Inheritance allows subclasses to reuse, customize and specialize the behavior of existing superclasses without modifying them.

In TypeScript we can extend a class using 'extends' keyword. For example

class Person{}
class Employee extends Person{}

The compiled JavaScript code (compiled with --target es6):

class Person {
}
class Employee extends Person {
}

Inheritance and constructor

The constructor of a superclass can be invoked by calling 'super(.....)' , for example:

class Person {
    _name: string;
    _age: number;

    constructor(name: string, age: number) {
        this._name = name;
        this._age = age;
    }
}

class Employee extends Person {
    _salary: number;

    constructor(name: string, age: number, salary: number) {
        //calling super class constructor
        super(name, age);
        this._salary = salary;
    }
}

let emp = new Employee("Ashlee", 23, 3000);
console.log(emp);

Output

Employee { _name: 'Ashlee', _age: 23, _salary: 3000 }

The compiled JavaScript code (--target es6):

class Person {
    constructor(name, age) {
        this._name = name;
        this._age = age;
    }
}
class Employee extends Person {
    constructor(name, age, salary) {
        //calling super class constructor
        super(name, age);
        this._salary = salary;
    }
}
let emp = new Employee("Ashlee", 23, 3000);
console.log(emp);

We don't necessarily have to declare same constructor from superclass if there are no additional properties to be initialized:

class Component{
    width: number;
    height: number;

    constructor(width: number, height: number) {
        this.width = width;
        this.height = height;
    }
}

class Button extends Component{
    onClick(){
       console.log("button clicked");
    }
}


let button: Button = new Button(10,5);
console.log(button);
button.onClick();

Output

Displaying employee:
Employee { _name: 'Ashlee', _age: 23, _salary: 3000 }

Method overriding

To specialize/modify a method of the superclass, we can add the same method with the same signature in subclass. To call super class version of the method we can use super.theMethod(). For example:

class Person {
    _name: string;
    _age: number;

    constructor(name: string, age: number) {
        this._name = name;
        this._age = age;
    }

    displayAsString(): void {
        console.log(this);
    }
}

class Employee extends Person {
    _salary: number;

    constructor(name: string, age: number, salary: number) {
        super(name, age);
        this._salary = salary;
    }

    //method overriding
    displayAsString(): void {
        console.log("Displaying employee:");
        super.displayAsString();
    }
}

let emp = new Employee("Ashlee", 23, 3000);
emp.displayAsString();

Output

Displaying employee:
Employee { _name: 'Ashlee', _age: 23, _salary: 3000 }

Compiled JavaScript code (--target es6):

class Person {
    constructor(name, age) {
        this._name = name;
        this._age = age;
    }
    displayAsString() {
        console.log(this);
    }
}
class Employee extends Person {
    constructor(name, age, salary) {
        super(name, age);
        this._salary = salary;
    }
    //method overriding
    displayAsString() {
        console.log("Displaying employee:");
        super.displayAsString();
    }
}
let emp = new Employee("Ashlee", 23, 3000);
emp.displayAsString();