TypeScript Inheritance

Inheritance is a fundamental concept in object-oriented programming (OOP). It allows one class to inherit properties and methods from another class. The class that inherits is called the child class, and the class whose properties and methods are inherited is called the parent class. Inheritance enables code reusability, allowing a class to leverage 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:

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 the super keyword to call the properties and methods of the parent class. The primary 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.

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:

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.