TypeScript Inheritance

Introduction

In this chapter, we will explore inheritance in TypeScript. Inheritance is a fundamental concept in Object-Oriented Programming (OOP) that allows a class to inherit properties and methods from another class. Understanding inheritance is essential for creating hierarchical class structures and promoting code reuse in TypeScript programs.

Definition
Inheritance Syntax
Basic Inheritance
Method Overriding
Using super Keyword
Protected Members
Complete Example with Output
Conclusion

Definition

Inheritance is a mechanism that allows one class (subclass) to inherit properties and methods from another class (superclass). This promotes code reuse and establishes a natural hierarchy between classes.

Inheritance Syntax

Syntax

class SubClass extends SuperClass {
  // additional properties and methods
}

Example

This example demonstrates a simple class inheritance structure.

class Animal {
  name: string;

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

  makeSound(): string {
    return `${this.name} makes a sound.`;
  }
}

class Dog extends Animal {
  constructor(name: string) {
    super(name);
  }

  bark(): string {
    return `${this.name} barks.`;
  }
}

let dog = new Dog("Tommy");
console.log(dog.makeSound()); // Output: Tommy makes a sound.
console.log(dog.bark()); // Output: Tommy barks.

Output

Tommy makes a sound.
Tommy barks.

Basic Inheritance

A subclass inherits properties and methods from its superclass. The subclass can also have its own additional properties and methods.

Example

This example demonstrates basic inheritance where the Dog class inherits from the Animal class.

class Animal {
  name: string;

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

  makeSound(): string {
    return `${this.name} makes a sound.`;
  }
}

class Dog extends Animal {
  constructor(name: string) {
    super(name);
  }

  bark(): string {
    return `${this.name} barks.`;
  }
}

let dog = new Dog("Tommy");
console.log(dog.makeSound()); // Output: Tommy makes a sound.
console.log(dog.bark()); // Output: Tommy barks.

Output

Tommy makes a sound.
Tommy barks.

Method Overriding

A subclass can provide a specific implementation of a method that is already defined in its superclass. This is known as method overriding.

Example

This example demonstrates method overriding where the Dog class overrides the makeSound method of the Animal class.

class Animal {
  name: string;

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

  makeSound(): string {
    return `${this.name} makes a sound.`;
  }
}

class Dog extends Animal {
  constructor(name: string) {
    super(name);
  }

  makeSound(): string {
    return `${this.name} barks.`;
  }
}

let dog = new Dog("Tommy");
console.log(dog.makeSound()); // Output: Tommy barks.

Output

Tommy barks.

Using super Keyword

The super keyword is used to call the constructor or methods of the superclass from the subclass.

Example

This example demonstrates the use of the super keyword to call the constructor and a method of the superclass.

class Animal {
  name: string;

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

  makeSound(): string {
    return `${this.name} makes a sound.`;
  }
}

class Dog extends Animal {
  constructor(name: string) {
    super(name);
  }

  makeSound(): string {
    return `${super.makeSound()} and barks.`;
  }
}

let dog = new Dog("Tommy");
console.log(dog.makeSound()); // Output: Tommy makes a sound. and barks.

Output

Tommy makes a sound. and barks.

Protected Members

The protected access modifier allows members to be accessible within the class and its subclasses but not outside of these classes.

Example

This example demonstrates the use of protected members in a class and its subclass.

class Animal {
  protected name: string;

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

  protected makeSound(): string {
    return `${this.name} makes a sound.`;
  }
}

class Dog extends Animal {
  constructor(name: string) {
    super(name);
  }

  public bark(): string {
    return `${this.name} barks.`;
  }

  public speak(): string {
    return this.makeSound();
  }
}

let dog = new Dog("Tommy");
console.log(dog.bark()); // Output: Tommy barks.
console.log(dog.speak()); // Output: Tommy makes a sound.
// console.log(dog.name); // Error: Property 'name' is protected and only accessible within class 'Animal' and its subclasses.

Output

Tommy barks.
Tommy makes a sound.

Complete Example with Output

In this section, we will combine the examples into a single TypeScript file, compile it to JavaScript, and run it to see the output.

TypeScript Code

You can test the following code in the TypeScript Playground:

// Basic Inheritance
class Animal {
  name: string;

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

  makeSound(): string {
    return `${this.name} makes a sound.`;
  }
}

class Dog extends Animal {
  constructor(name: string) {
    super(name);
  }

  bark(): string {
    return `${this.name} barks.`;
  }
}

let dog1 = new Dog("Tommy");
console.log(dog1.makeSound()); // Output: Tommy makes a sound.
console.log(dog1.bark()); // Output: Tommy barks.

// Method Overriding
class Cat extends Animal {
  constructor(name: string) {
    super(name);
  }

  makeSound(): string {
    return `${this.name} meows.`;
  }
}

let cat = new Cat("Kitty");
console.log(cat.makeSound()); // Output: Kitty meows.

// Using `super` Keyword
class Bird extends Animal {
  constructor(name: string) {
    super(name);
  }

  makeSound(): string {
    return `${super.makeSound()} and chirps.`;
  }
}

let bird = new Bird("Tweety");
console.log(bird.makeSound()); // Output: Tweety makes a sound. and chirps.

// Protected Members
class Horse extends Animal {
  constructor(name: string) {
    super(name);
  }

  public neigh(): string {
    return `${this.name} neighs.`;
  }

  public speak(): string {
    return this.makeSound();
  }
}

let horse = new Horse("Spirit");
console.log(horse.neigh()); // Output: Spirit neighs.
console.log(horse.speak()); // Output: Spirit makes a sound.
// console.log(horse.name); // Error: Property 'name' is protected and only accessible within class 'Animal' and its subclasses.

Conclusion

In this chapter, we covered inheritance in TypeScript, including basic inheritance, method overriding, using the super keyword, and protected members. We provided a complete example with its output to illustrate how these concepts work in TypeScript. Understanding inheritance is essential for creating hierarchical class structures and promoting code reuse in TypeScript programs.

Java Guides

Search This Blog