TypeScript Method Overriding

Introduction

In this chapter, we will explore method overriding in TypeScript. Method overriding allows a subclass to provide a specific implementation of a method that is already defined in its superclass. Understanding how to use method overriding is essential for extending and customizing the behavior of inherited methods in TypeScript programs.

Table of Contents

• Definition
• Method Overriding Syntax
• Basic Method Overriding
• Using super Keyword
• Access Modifiers in Method Overriding
• Complete Example with Output
• Conclusion

Definition

Method overriding is a feature that allows a subclass to provide a specific implementation of a method that is already defined in its superclass. The overridden method in the subclass should have the same name, return type, and parameters as the method in the superclass.

Method Overriding Syntax

Syntax

class SuperClass {
  methodName(parameters): returnType {
    // implementation
  }
}

class SubClass extends SuperClass {
  methodName(parameters): returnType {
    // overridden implementation
  }
}

Example

This example demonstrates basic 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.

Basic Method Overriding

Method overriding allows the subclass to provide a specific implementation for a method defined in the superclass.

Example

This example demonstrates a class Cat that 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 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.

Output

Kitty meows.

Using super Keyword

The super keyword is used to call the superclass's method from the subclass. This is useful when the subclass wants to extend or modify the behavior of the superclass's method.

Example

This example demonstrates the use of the super keyword to call the makeSound method of the Animal class from the Bird class.

class Animal {
  name: string;

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

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

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.

Output

Tweety makes a sound. and chirps.

Access Modifiers in Method Overriding

When overriding a method, the access modifier (public, private, or protected) of the overriding method in the subclass must be the same or less restrictive than the method in the superclass.

Example

This example demonstrates method overriding with access modifiers.

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 makeSound(): string {
    return `${this.name} barks.`;
  }
}

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

Output

Tommy barks.

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 Method Overriding
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.

// Method Overriding with 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.

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

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

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

Conclusion

In this chapter, we covered method overriding in TypeScript, including basic method overriding, using the super keyword, and method overriding with access modifiers. We provided a complete example with its output to illustrate how these concepts work in TypeScript. Understanding method overriding is essential for extending and customizing the behavior of inherited methods in TypeScript programs.