TypeScript Inheritance

Inheritance is one of the core concepts of object-oriented programming (OOPs). It is the mechanism in which one class derives the properties of another class. The class which inherits properties and methods is called the child class and the class whose properties and methods are inherited are called the parent class. Inheritance allows a class to reuse the functionality of an existing class without rewriting it.

Inheritance in TypeScript

JavaScript uses prototypal inheritance, not classical inheritance like Java or C++. Typescript uses class-based inheritance which is simply the syntactic sugar of prototypal inheritance. TypeScript supports only single inheritance and multilevel inheritance. In TypeScript, a class inherits another class using extends keyword.

Syntax:

class ChildClass extends ParentClass {
    // Methods and fields
}

Example:

Javascript

class Vehicle{
    honk(): void{
        console.log("Vehicle Honks");
    }
}
class Car extends Vehicle{
    display(): void{
        console.log("This is a Car");
    }
}
let car = new Car();
car.honk();
car.display();

Vehicle Honks
This is a Car

Explanation: Here, class Car inherits the honk() method from the Vehicle class. This way the Car class can reuse the methods of its parent class.

Super Keyword: TypeScript uses super keywords to call the properties of the parent class. The major use of the super keyword is

• To call a constructor of a parent class
• To call the method of the parent class

Example: Let’s take an example of class Person and class Employee inherits class Person.

Javascript

class Person {
    constructor(private firstName: string,
    private lastName: string) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    getName(): string {
        return `I am ${this.firstName} ${this.lastName}.`;
    }
}
class Employee extends Person {
    constructor(
        firstName: string,
        lastName: string,
        private jobTitle: string) {

        // Invoking the constructor of the Person class
        super(firstName, lastName);
    }
    displayInfo(): void {
        console.log(super.getName());
        console.log(`My Job title is ${this.jobTitle}`);
    }
}
let employee = new Employee('Mehul',
        'Sharma', 'Web Developer');

employee.displayInfo();

Output:

I am Mehul Sharma.
My Job title is Web Developer.

Explanation: Here, the Employee class calls the constructor of the Person class using super( ) to initialize firstName and lastName. It also calls the getName( ) using super in its own method.

Method Overriding: TypeScript also supports method overriding. Let’s take the same example of the Employee class and this class will override the method of the Person class.

Example:

Javascript

class Person {
    constructor(private firstName: string,
    private lastName: string) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    displayInfo(): string {
        return `I am ${this.firstName} ${this.lastName}.`;
    }
}
class Employee extends Person {
    constructor(
        firstName: string,
        lastName: string,
        private jobTitle: string) {

        // Invoking the constructor of Person class
        super(firstName, lastName);
    }
    displayInfo(): string {
        return super.displayInfo()
            + `The job title is ${this.jobTitle}.`;
    }
}
let employee = new Employee('Mehul',
    'Sharma', 'Web Developer');

console.log(employee.displayInfo());

Output:

I am Mehul Sharma.The job title is Web Developer.

Conclusion:

• Typescript uses extends keyword to implement inheritance.
• Using super(), the child class can call the constructor, properties, and methods of the parent class.
• TypeScript also supports method overriding.