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 😃!