Inheritance in TypeScript

Introduction

Inheritance is a fundamental concept in object-oriented programming (OOP) that allows one class to inherit properties and methods from another class. This tutorial will guide you through implementing inheritance using classes in TypeScript, providing both theoretical understanding and practical examples.

Concept

Inheritance enables the creation of a new class based on an existing class. The existing class is called the base class or parent class, while the newly created class is called the derived class or child class. The derived class inherits all the properties and methods of the base class, which promotes code reusability and establishes a hierarchical relationship between classes.

Key Terms

• Base Class (Parent Class): The class from which other classes inherit.
• Derived Class (Child Class): The class that inherits from another class.
• Inheritance Hierarchy: A tree-like structure where each class can inherit from one or more classes above it.

Examples

Let's dive into some practical examples to understand how inheritance works in TypeScript.

Example 1: Basic Inheritance

Consider a simple scenario where we have two classes, Animal and Dog. The Dog class inherits from the Animal class.

1class Animal {
2  name: string;
3 
4  constructor(name: string) {
5      this.name = name;
6  }
7 
8  makeSound(): void {
9      console.log("Some generic animal sound");
10  }
11}
12 
13class Dog extends Animal {
14  breed: string;
15 
16  constructor(name: string, breed: string) {
17      super(name);
18      this.breed = breed;
19  }
20 
21  bark(): void {
22      console.log(`${this.name} barks loudly!`);
23  }
24}
25 
26const myDog = new Dog("Buddy", "Golden Retriever");
27myDog.makeSound(); // Output: Some generic animal sound
28myDog.bark();      // Output: Buddy barks loudly!

In this example:

• The Animal class has a property name and a method makeSound().
• The Dog class extends the Animal class using the extends keyword.
• The Dog class has an additional property breed and a method bark().
• The constructor of the Dog class calls the constructor of the Animal class using super(name) to initialize the inherited properties.

Example 2: Overriding Methods

Inheritance allows derived classes to override methods from the base class. Let's modify the previous example to demonstrate method overriding.

1class Animal {
2  name: string;
3 
4  constructor(name: string) {
5      this.name = name;
6  }
7 
8  makeSound(): void {
9      console.log("Some generic animal sound");
10  }
11}
12 
13class Dog extends Animal {
14  breed: string;
15 
16  constructor(name: string, breed: string) {
17      super(name);
18      this.breed = breed;
19  }
20 
21  makeSound(): void {
22      console.log(`${this.name} barks loudly!`);
23  }
24 
25  bark(): void {
26      console.log(`${this.name} barks loudly!`);
27  }
28}
29 
30const myDog = new Dog("Buddy", "Golden Retriever");
31myDog.makeSound(); // Output: Buddy barks loudly!

In this modified example:

• The makeSound() method in the Dog class overrides the makeSound() method in the Animal class.
• When makeSound() is called on an instance of Dog, it executes the overridden method, which prints a specific message for dogs.

Example 3: Protected and Private Modifiers

TypeScript supports access modifiers like public, protected, and private. Let's explore how these modifiers affect inheritance.

1class Animal {
2  protected name: string;
3 
4  constructor(name: string) {
5      this.name = name;
6  }
7 
8  makeSound(): void {
9      console.log("Some generic animal sound");
10  }
11}
12 
13class Dog extends Animal {
14  private breed: string;
15 
16  constructor(name: string, breed: string) {
17      super(name);
18      this.breed = breed;
19  }
20 
21  displayInfo(): void {
22      console.log(`Name: ${this.name}, Breed: ${this.breed}`);
23  }
24}
25 
26const myDog = new Dog("Buddy", "Golden Retriever");
27myDog.displayInfo(); // Output: Name: Buddy, Breed: Golden Retriever
28// myDog.name;       // Error: Property 'name' is protected and only accessible within class 'Animal' and its subclasses.

In this example:

• The name property in the Animal class is marked as protected, allowing it to be accessed by derived classes but not from outside the class hierarchy.
• The breed property in the Dog class is marked as private, making it accessible only within the Dog class itself.

What's Next?

In this tutorial, we explored the basics of inheritance in TypeScript using classes. In the next section, we will delve into Abstract Classes, which are a more advanced concept that allows you to define a base class with some methods that must be implemented by derived classes. This will provide a deeper understanding of how to structure and organize your code effectively.

Stay tuned for more insights into object-oriented programming in TypeScript!