Class implementing Interfaces in TypeScript

avatar

Borislav Hadzhiev

Mon Mar 21 20223 min read

banner

Photo by Saeed Mhmdi

Class implementing Interfaces in TypeScript #

Use the implements clause to implement an interface in a class, e.g. class Developer implements Employee {}. The implements clause checks if the class satisfies the interface by defining all of its properties and methods.

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

The implements clause allows us to check if a class satisfies a specific interface.

An error is issued if the class fails to correctly implement the interface.

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[] = ['develop', 'test']; address: { country: string; city: string } = { country: 'Austria', city: 'Linz', }; constructor(public id: number, public name: string) { this.id = id; this.name = name; } doWork() { console.log(`${this.name} writes code`); } } const dev = new Developer(1, 'Tom'); console.log(dev.name); // 👉️ "Tom"

The example above sets class properties directly and takes parameters in the constructor method.

You can use this approach to implement multiple interfaces.

index.ts
interface Employee { id: number; salary: number; } interface Person { name: string; } class Developer implements Employee, Person { constructor( public id: number, public name: string, public salary: number ) { this.id = id; this.name = name; this.salary = salary; } } const dev = new Developer(1, 'Tom', 100); console.log(dev.name); // 👉️ "Tom"

The Developer class implements the Employee and Person interfaces.

A class can implement as many interfaces as necessary.

When implementing an interface, you have to make sure to set all of the necessary properties and methods on the class.

index.ts
interface Employee { id: number; salary: number; } // ⛔️ Class 'Developer' incorrectly implements interface 'Employee'. // Property 'salary' is missing in type 'Developer' // but required in type 'Employee'.ts(2420) class Developer implements Employee { constructor(public id: number) { this.id = id; } }

The Developer class implements the Employee interface, but doesn't define the required salary property, so an error is issued.

We either have to add the salary property to the Developer class or mark it as optional in the interface.

index.ts
interface Employee { id: number; salary?: number; // 👈️ optional property (can be undefined) } class Developer implements Employee { constructor(public id: number) { this.id = id; } }

The salary property is marked as optional, so the class does not have to define it.

All the implements clause does is - it checks whether the class satisfies a particular interface, so we have to many sure to define all of the required properties and methods.

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 { multiply(a: number, b: number): number; } class Developer implements Employee { // ⛔️ Error: Parameter 'a' implicitly has an 'any' type.ts(7006) multiply(a, b) { return a * b; } }

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

This is because the implements clause doesn't change the classes' 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 on the class.

Use the search field on my Home Page to filter through my more than 1,000 articles.