Class Inheritance in TypeScript

Inheritance is a fundamental concept in object-oriented programming that allows one class to inherit properties and methods from another class. TypeScript supports class inheritance, enabling you to create a hierarchy of classes and promote code reuse. This guide covers the basics of class inheritance in TypeScript with practical examples.

Basic Inheritance

In TypeScript, you can create a new class based on an existing class using the extends keyword. The new class (derived class) inherits all properties and methods from the existing class (base class).


class Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  move(distance: number): void {
    console.log(`${this.name} moved ${distance} meters.`);
  }
}

class Dog extends Animal {
  bark(): void {
    console.log("Woof! Woof!");
  }
}

const dog = new Dog("Buddy");
dog.bark(); // Output: Woof! Woof!
dog.move(10); // Output: Buddy moved 10 meters.

Overriding Methods

Derived classes can override methods from the base class. To do this, simply define a method in the derived class with the same name as the one in the base class:


class Bird extends Animal {
  move(distance: number): void {
    console.log(`${this.name} flew ${distance} meters.`);
  }
}

const bird = new Bird("Sparrow");
bird.move(20); // Output: Sparrow flew 20 meters.

Calling Base Class Methods

Derived classes can call methods from the base class using the super keyword. This is useful when you want to extend or modify the behavior of a base class method:


class Fish extends Animal {
  move(distance: number): void {
    console.log("Swimming...");
    super.move(distance);
  }
}

const fish = new Fish("Goldfish");
fish.move(5); // Output: Swimming... Goldfish moved 5 meters.

Inheritance and Constructors

When a derived class has a constructor, it must call the base class constructor using the super keyword. This ensures the base class is properly initialized:


class Vehicle {
  brand: string;

  constructor(brand: string) {
    this.brand = brand;
  }
}

class Car extends Vehicle {
  model: string;

  constructor(brand: string, model: string) {
    super(brand);
    this.model = model;
  }

  getDetails(): string {
    return `Car: ${this.brand} ${this.model}`;
  }
}

const car = new Car("Toyota", "Corolla");
console.log(car.getDetails()); // Output: Car: Toyota Corolla

Protected Members

The protected access modifier allows a member to be accessed within its class and by derived classes, but not outside those classes:


class Parent {
  protected message: string;

  constructor(message: string) {
    this.message = message;
  }

  protected showMessage(): void {
    console.log(this.message);
  }
}

class Child extends Parent {
  showChildMessage(): void {
    this.showMessage();
  }
}

const child = new Child("Hello, Protected World!");
child.showChildMessage(); // Output: Hello, Protected World!

Conclusion

Inheritance in TypeScript allows you to create a structured class hierarchy, promoting code reuse and making your codebase more manageable. By understanding and utilizing inheritance, method overriding, and access modifiers, you can build robust and scalable applications.

Archive