How to Extend Interfaces with Classes in TypeScript?

In this tutorial, I will explain how to use the extends keyword in TypeScript to inherit all the properties from an existing interface. We’ll cover how classes can extend interfaces and the resulting JavaScript code and discuss some practical code examples. You will learn how to extend interfaces with classes in TypeScript.

What Does It Mean for a Class to Extend an Interface in TypeScript?

First, let’s clarify what it means for a class to extend an interface in TypeScript. When a class extends an interface, it is essentially saying “I promise to adhere to the contract defined by this interface”. The class must implement all the properties and methods specified in the interface. This allows for polymorphism and code reusability.

Basic Example

Here’s a simple example to understand the syntax:

interface Employee {
  name: string;
  id: number;
  getSalary(): number;
}

class FullTimeEmployee implements Employee {
  name: string;
  id: number;

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

  getSalary(): number {
    // implementation here
  }
}

In this example, we define an Employee interface with a few properties and a getSalary method. The FullTimeEmployee class implements this interface, providing an implementation for each interface member.

Check out Functions in TypeScript Interfaces

Extend Classes with Interfaces in TypeScript

Interfaces can extend classes in TypeScript, including their private and protected members. This allows for flexible and powerful abstraction.

Advanced Example

Now, let me give you an advanced example.

class Person {
  protected name: string;

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

interface Employee extends Person {
  id: number;
  getSalary(): number;
}

class FullTimeEmployee extends Person implements Employee {
  id: number;

  constructor(name: string, id: number) {
    super(name);
    this.id = id;
  }

  getSalary(): number {
    // implementation here
  }
}

Here the Employee interface extends the Person class, inheriting its protected name property. The FullTimeEmployee class then implements Employee while extending Person, demonstrating how classes can extend both interfaces and classes simultaneously.

Read Check if an Object Implements an Interface in TypeScript

When to Use Interfaces vs Classes

So when should you use interfaces, and when should you use classes? A general rule of thumb is to use interfaces for defining types and classes for defining implementations. Interfaces provide a lightweight way to define contracts without any run-time overhead, while classes allow you to define actual implementations with real code.

Conclusion

In this tutorial, I explained how to extend interfaces with classes in TypeScript with a few examples.

You may also like: