How to make a class implement methods and properties using an interface in TypeScript?

Originally posted here!

To make or force a class to implement certain methods or properties, we can use an interface to make it implement the required methods and properties.

To do that we can start by writing the class name followed by writing the implements keyword followed by the name of the interface we need to use and then the class body.

TL;DR

// a simple car structure interface
interface CarStructure {
  name: string;
  yearMade: number;
  startEngine: () => void;
}

// a class that satisfies the `CarStructure` interface
// using the `implements` keyword
class Car implements CarStructure {
  name: string;
  yearMade: number;

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

  startEngine() {
    console.log("Car started...");
  }
}

For example, let's first create a simple interface with 2 properties with its type and one method signature.

It can be done like this,

// a simple car structure interface
interface CarStructure {
  name: string;
  yearMade: number;
  startEngine: () => void;
}

As you can see from the above code we have defined 2 properties called name and yearMade with string and number respectively. We have also defined a startEngine method signature that doesn't need to have any parameters as well as doesn't return a value.

Now we can create a class and then make the class implement these properties and methods using the CarStructure interface using the implements keyword.

It can be done like this,

// a simple car structure interface
interface CarStructure {
  name: string;
  yearMade: number;
  startEngine: () => void;
}

// a class that satisfies the `CarStructure` interface
// using the `implements` keyword
class Car implements CarStructure {}

Now, as soon as you write the implements CarStructure the TypeScript compiler will throw an error saying Type 'Car' is missing the following properties from type 'CarStructure': name, yearMade, startEngine. In simple words, it is saying that we need to make the properties as well as the method that is in the CarStructure interface. This helps us implement the methods and the properties in the class with the correct types.

So let's implement the name, age, and startEngine properties and methods.

It can be done like this,

// a simple car structure interface
interface CarStructure {
  name: string;
  yearMade: number;
  startEngine: () => void;
}

// a class that satisfies the `CarStructure` interface
// using the `implements` keyword
class Car implements CarStructure {
  name: string;
  yearMade: number;

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

  startEngine() {
    console.log("Car started...");
  }
}

As soon as we implement the properties and methods in the Car class, the errors are gone and the CarStructure interface structure is satisfied.

We have successfully made a class implement methods and properties using an interface in TypeScript. Yay 🥳!

See the above code live in codesandbox.

That's all 😃!

Feel free to share if you found this useful 😃.