What is the Difference Between ‘extends’ and ‘implements’ in TypeScript?

Introduction

One of the key features of TypeScript is its support for object-oriented programming concepts such as inheritance and interfaces. When working with classes, you might come across two keywords: ‘extends’ and ‘implements’. While they both involve creating relationships between classes, they have distinct purposes and usage.

Extends

The ‘extends’ keyword in TypeScript is used to establish inheritance between classes. It allows a class to inherit properties and methods from another class, known as the superclass or base class. The derived class, also known as the subclass or child class, can access and override the superclass’s members.

Here’s an example:

class Animal {
  sound: string;

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

  makeSound() {
    console.log(this.sound);
  }
}

class Dog extends Animal {
  constructor() {
    super('Woof woof!');
  }
}

const dog = new Dog();

dog.makeSound(); // Output: Woof woof!

In the example above, the ‘Dog’ class extends the ‘Animal’ class. It inherits the ‘makeSound’ method from the ‘Animal’ class and overrides the ‘sound’ property to make a specific sound.

Implements

On the other hand, the ‘implements’ keyword is used to enforce that a class implements specific methods and properties defined in an interface. An interface in TypeScript is a way to define a contract for classes to adhere to. When a class implements an interface, it must provide an implementation for all the members defined in the interface.

Let’s see an example:

interface Shape {
  calculateArea(): number;
}

class Rectangle implements Shape {
  width: number;
  height: number;

  constructor(width: number, height: number) {
    this.width = width;
    this.height = height;
  }

  calculateArea() {
    return this.width * this.height;
  }
}

const rectangle = new Rectangle(10, 20);

console.log(rectangle.calculateArea()); // Output: 200

In this example, the ‘Rectangle’ class implements the ‘Shape’ interface, which requires the implementation of the ‘calculateArea’ method. The ‘Rectangle’ class provides the necessary implementation based on its own properties.

Conclusion

To summarize, ‘extends’ is used for class inheritance, where a subclass inherits from a superclass and can override its members. ‘implements’ is used to ensure a class adheres to an interface’s contract and provides implementations for the specified members. Understanding the difference between the two keywords is crucial for writing clean and maintainable TypeScript code.

Now that you have a clear understanding of the differences between ‘extends’ and ‘implements’ in TypeScript, you can confidently use them in your projects to enhance code reusability and maintainability.