Interface in TypeScript

Shailendra Chauhan

Print 3 min read

01 Sep 2022

Advanced

17.8K Views

The interface acts as a contract between itself and any class which implements it. It means a class that implements an interface is bound to implement all its members. An interface cannot be instantiated but it can be referenced by the class object which implements it. Interfaces can be used to represent any non-primitive JavaScript object.

In other words, the interface describes the overall structure of an object in TypeScript and it can be used to provide the complete information about object property names and the datatypes their values can hold to the TypeScript compiler once it is being declared. The strict type checking can be easily achievable by using the interface, its properties, and attributes for robust application developments.

How to use interface in TypeScript

For using the interface with TypeScript, we can use the reserved keyword called interface followed by its name as given below.

// Created the interface
interface Student {
 firstName: string,
 lastName: string,
 rollno: number,
 showDetails: () => string
}
// Created student object with reference of Student interface
var student: Student = {
 firstName: "Tom",
 lastName: "Hanks",
 rollno: 256,
 showDetails: (): string => { return "Hello Students !!!" }
}

In the above example, we have created an interface Student with the properties and attributes, and we do have one object called student that refers to the interface by providing the values as per the defined data type, let's see some other examples below.

interface.ts

interface IHuman {
 firstName: string;
 lastName: string;
}
class Employee implements IHuman {
 constructor(public firstName: string, public lastName: string) {

 }
}

The compiled JavaScript (ES5) code for the above TypeScript code is given below:

interface.js

var Employee = (function () {
 function Employee(firstName, lastName) {
 this.firstName = firstName;
 this.lastName = lastName;
 }
 return Employee;
}());

Use of Interfaces

Interfaces are particularly useful for validating the required structure of properties, objects passed as parameters, and objects returned from functions.

Also, Interfaces are only TypeScript compile-time constructs, and compiled JavaScript code has no such representation.

Interface Inheritance

An interface can be inherited from zero or more base types. The base type can be a class or interface.

To inherit the interface from one to another interface, in TypeScript we can use the keyword extends that allow us to extend the set of properties and attributes from one interface to another and access it into the child interfaces accordingly.

Let’s understand the interface inheritance with the following examples:

Interface1.ts

interface IStore {
 Read(): void;
 Write(): void;
}
interface ICompress {
 Compress(): void;
 Decompress(): void;
}

interface IDocument extends IStore, ICompress {
 Print(): void;
}

Class Implementing Interfaces

Just like C# and Java, a TypeScript class can implement multiple interfaces, and to do that, we should use the keyword called implements that allows us to access multiple interfaces into the class implementation.

Interface2.ts

interface IStore {
 Read(): void;
 Write(): void;
}
interface ICompress {
 Compress(): void;
 Decompress(): void;
}

class DocStore implements IStore, ICompress {
 Read(): void {
 console.log("Read Method for IStore");
 }
 Write(): void {
 console.log("Write Method for IStore");
 }
 Compress(): void {
 console.log("Compress Method for ICompress");
 }
 Decompress(): void {
 console.log("Decompress Method for ICompress");
 }
}

let I1: IStore = new DocStore();
//can access only IStore members
I1.Read();
I1.Write();

let I2: ICompress = new DocStore();
//can access only ICompress members
I2.Compress();
I2.Decompress();

Interface Extending Class

Unlike C# or Java, TypeScript interfaces can inherit (extend) classes. When an interface extends a class, type it inherits the members of the class but not their implementations i.e. the members’ declaration is available in the interface. Also, anything added to the class will also be added to the interface.

Interface.ts

class Store {
 Read(): void {
 console.log("Read Method for Store");
 }
 Write(): void {
 console.log("Write Method for Store");
 }
}

interface IDocStore extends Store {
 //inherited Read and Write methods with declaration only
}
class Doc implements IDocStore {
 //mandatory to implement Read and Write methods of IDocStore
 Read(): void {
 console.log("Read Method for Doc");
 }
 Write(): void {
 console.log("Write Method for Doc");
 }
}
let I1: IDocStore = new Doc();
I1.Read();
I1.Write();

What do you think?

I hope you will enjoy the Interfaces in TypeScript while developing your web app. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.