Inheritance and Polymorphism in TypeScript

3 min
Advanced

INHERITANCE is a mechanism that allows us to define a new class based on an existing class. The existing class is known as the base class or superclass, and the new class is known as the derived class or subclass.

The subclass inherits all the properties and methods from the superclass and can add new attributes and behaviors as needed.

If you want to learn more, check out the Object-Oriented Programming Course

In TypeScript, we can achieve inheritance using the extends keyword. The base class defines the common properties and methods, while the derived class extends and specializes these members.

Let’s see it with an example:

// Base class
class Animal {
    constructor(public name: string) {}

    makeSound(): void {
        console.log(`${this.name} makes a sound.`);
    }
}

// Derived class
class Dog extends Animal {
    bark(): void {
        console.log(`${this.name} is barking.`);
    }
}

const myDog = new Dog("MyDog");
myDog.makeSound(); // Output: MyDog makes a sound.
myDog.bark();      // Output: MyDog is barking.

Copied!

In this example,

Dog inherits the name property and the makeSound method from the Animal class
It adds its own bark method

Method Overriding

A derived class can override methods from the base class using the override keyword.

class Animal {
    constructor(public name: string) {}

    makeSound(): void {
        console.log(`${this.name} makes a sound.`);
    }
}

class Cat extends Animal {
    override makeSound(): void {
        console.log(`${this.name} meows.`);
    }
}

const myCat = new Cat("Misi");
myCat.makeSound(); // Output: Misi meows.

Copied!

Here, the makeSound method in Cat overrides the implementation of the makeSound method in Animal.

Constructor and Initialization in Inheritance

When a derived class has a constructor, it is usually necessary to call the constructor of the base class to properly initialize the object. For this we use the super keyword.

class Animal {
    constructor(public name: string) {}
}

class Dog extends Animal {
    constructor(name: string, public breed: string) {
        super(name); // Calls the constructor of the base class
    }

    showInfo(): void {
        console.log(`Name: ${this.name}, Breed: ${this.breed}`);
    }
}

const myDog = new Dog("Rex", "Labrador");
myDog.showInfo(); // Output: Name: Rex, Breed: Labrador

Copied!

In this example, the Dog constructor calls the Animal constructor using super to initialize the name property.

Polymorphism in TypeScript

POLYMORPHISM is another key concept in object-oriented programming. It allows us to treat objects of different classes uniformly, as long as they share a common interface or superclass.

In TypeScript, we can achieve polymorphism using interfaces. Let’s see an example using an interface:

interface Animal {
  makeSound(): void;
}

class Dog implements Animal {
  makeSound() {
    console.log("The dog barks");
  }
}

class Cat implements Animal {
  makeSound() {
    console.log("The cat meows");
  }
}

function makeAnimalSound(animal: Animal) {
  animal.makeSound();
}

const myDog = new Dog();
const myCat = new Cat();

makeAnimalSound(myDog); // Output: "The dog barks"
makeAnimalSound(myCat); // Output: "The cat meows"

Copied!

In this example

We create an Animal interface with a makeSound method.
Then, we create the Dog and Cat classes that implement the Animal interface.
Finally, we create a makeAnimalSound function that accepts a parameter of type Animal and calls the makeSound method of the passed object.