Class incorrectly implements interface in TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 21, 2022

banner

Photo from Unsplash

Class incorrectly implements interface in TypeScript #

The error "Class incorrectly implements interface" occurs when a class implements an interface without specifying all of the properties and methods defined on the interface. To solve the error, make sure to define and type all of the required properties and methods of the interface.

class incorrectly implements interface

Here is an example of how the error occurs.

index.ts
interface Employee { id: number; name: string; tasks: string[]; address: { country: string; city: string; }; doWork(): void; } // ⛔️ Error: Class 'Developer' incorrectly implements interface 'Employee'. // Property 'doWork' is missing in type // 'Developer' but required in type 'Employee'.ts(2420) class Developer implements Employee { constructor( public id: number, public name: string, public tasks: string[], public address: { country: string; city: string }, ) { this.id = id; this.name = name; this.tasks = tasks; this.address = address; } // 👇️ did not implement method // doWork(): void { // console.log(`${this.name} writes code`); // } }

The issue in the example above is that when using the implements clause, we have to make sure that the class satisfies the interface.

The class has to define all of the properties and methods the interface specifies.

The error message in the example states that the property doWork is missing in type Developer, which is quite helpful.

To solve the error in the example above, we have to define the doWork() method in the class.

index.ts
interface Employee { id: number; name: string; tasks: string[]; address: { country: string; city: string; }; doWork(): void; } class Developer implements Employee { constructor( public id: number, public name: string, public tasks: string[], public address: { country: string; city: string }, ) { this.id = id; this.name = name; this.tasks = tasks; this.address = address; } doWork(): void { console.log(`${this.name} writes code`); } }

If your class does not expect to take the specific values as parameters upon initialization, use class properties.

index.ts
interface Employee { id: number; name: string; tasks: string[]; address: { country: string; city: string; }; doWork(): void; } class Developer implements Employee { tasks: string[] = ['dev', 'test']; address: { country: string; city: string } = { country: 'Germany', city: 'Hamburg', }; constructor(public id: number, public name: string) { this.id = id; this.name = name; } doWork(): void { console.log(`${this.name} writes code`); } } const dev = new Developer(1, 'Tom'); console.log(dev.tasks); // 👉️ ['dev', 'test']

The example above uses both class properties and a constructor method and correctly implements the interface.

A very common cause of the "Class incorrectly implements interface" error is specifying the properties of the interface nested within an object in the class.

index.ts
interface Employee { id: number; name: string; } // ⛔️ Class 'Developer' incorrectly implements interface 'Employee'. // Type 'Developer' is missing the following // properties from type 'Employee': id, name ts(2420) class Developer implements Employee { constructor(public props: { id: number; name: string }) { this.props = props; } }

The Employee type has an id and name properties, but we define a props field in the class that is an object with id and name properties.

Instead, we should define the id and name properties on the class without nesting them inside of an object.

index.ts
interface Employee { id: number; name: string; } class Developer implements Employee { constructor(public id: number, public name: string) { this.id = id; this.name = name; } }

Note that the purpose of the implements clause is only to check whether the class can be treated as the interface type.

The implements clause doesn't change the type of the class or its methods.

index.ts
interface Employee { sum(a: number, b: number): number; } class Developer implements Employee { // ⛔️ Parameter 'a' implicitly has an 'any' type.ts(7006) // ⛔️ Parameter 'b' implicitly has an 'any' type.ts(7006) sum(a, b){ return a + b; } }

Even though the class implements the Employee interface which defines typings for the sum function, the sum method in the class does not automatically get typed.

This is because the implements clause doesn't change the class's type.

index.ts
interface Employee { id: number; name?: string; // 👈️ optional property } class Developer implements Employee { constructor(public id: number) { this.id = id; } } const dev = new Developer(1); // ⛔️ Error: Property 'name' does not exist on type 'Developer'.ts(2339) console.log(dev.name);

If you implement an interface with an optional property, it doesn't get automatically created in the class.

We used a question mark to set the name property to optional in the Employee interface.

This means that it can either be a string or have a value of undefined.

The Developer class correctly implements the Employee interface because the name property is not required, however, the property does not automatically get assigned to the class.

Conclusion #

The error "Class incorrectly implements interface" occurs when a class implements an interface without specifying all of the properties and methods defined on the interface. To solve the error, make sure to define and type all of the required properties and methods of the interface.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.