Inheritance and Polymorphism in TypeScript

Inheritance and Polymorphism are important concepts in Object-Oriented Programming (OOP) that allow for code reuse and flexibility. TypeScript, being a superset of JavaScript, also supports these features.

In this tutorial, we will explore how to use inheritance and polymorphism in TypeScript.

Inheritance

Inheritance is the ability of a class to inherit properties and methods from another class. The class that inherits from another class is called the subclass, and the class that is inherited from is called the superclass or base class.

To create a subclass in TypeScript, we use the extends keyword followed by the name of the superclass.

Let's create a simple example of inheritance in TypeScript:

class Animal {
  move(distanceInMeters: number = 0) {
    console.log(`Animal moved ${distanceInMeters}m.`);
  }
}

class Dog extends Animal {
  bark() {
    console.log('Woof! Woof!');
  }
}

const dog = new Dog();
dog.bark(); // Output: Woof! Woof!
dog.move(10); // Output: Animal moved 10m.

In this example, the Dog class extends the Animal class. This means that the Dog class inherits the move() method from the Animal class. The Dog class also has its own bark() method.

To create an instance of the Dog class, we use the new keyword, just like we would for any other class.

Now, let's explore the concept of polymorphism in TypeScript.

Polymorphism

Polymorphism is the ability of an object to take on many forms. In OOP, this means that an object of a subclass can be treated as an object of its superclass. This allows for more flexibility and code reuse.

Let's create an example of polymorphism in TypeScript:

class Shape {
  area: number;

  calculateArea() {
    console.log('Area of shape: ', this.area);
  }
}

class Rectangle extends Shape {
  constructor(public height: number, public width: number) {
    super();
    this.area = height * width;
  }
}

class Circle extends Shape {
  constructor(public radius: number) {
    super();
    this.area = Math.PI * radius * radius;
  }
}

const rectangle = new Rectangle(10, 20);
const circle = new Circle(5);

let shapes: Shape[] = [rectangle, circle];

shapes.forEach(shape => {
  shape.calculateArea();
});

In this example, we have a Shape superclass and two subclasses, Rectangle and Circle. Each subclass has its own implementation of the calculateArea() method.

We create instances of the Rectangle and Circle classes and add them to an array of Shape objects. We then iterate over the array and call the calculateArea() method on each shape.

Even though each shape is of a different subclass, they can all be treated as objects of the Shape superclass. This is the power of polymorphism.

Conclusion

Inheritance and Polymorphism are important concepts in Object-Oriented Programming that allow for code reuse and flexibility. TypeScript, being a superset of JavaScript, also supports these features.

In this tutorial, we explored how to use inheritance and polymorphism in TypeScript. We created a simple example of inheritance and showed how to create a subclass that inherits properties and methods from a superclass. We also created an example of polymorphism and showed how objects of different subclasses can be treated as objects of a superclass.

Hopefully, this tutorial has helped you understand these concepts better and how to use them in your TypeScript projects.