How to Define an Interface in TypeScript

An interface in TypeScript contains only the declaration of the methods and properties, but not the implementation. It is the responsibility of the class that implements the interface by providing the implementation for all the members of the interface.

Today, in this TypeScript tutorial, we will learn how to work with interfaces in TypeScript. Continue reading to learn more.

Class Implementing Interfaces

Just like C# and Java, you can create the contract for classes by implementing an interface. An interface defines public properties and methods of a class. It does not have any private members and must not have any implementations of its members.

In TypeScript, you can define an interface by using the keyword interface as below. By default, all the members in an interface are public.

interface Person {
 fullName: string;

 toString();
}

Once the interface is defined, you can implement it in a class by following this convention: class [ClassName] implements [InterfaceName]. Let's create two classes named Employee and Customer implementing the Person interface:

class Employee implements Person {
 empID: string;
 fullName: string;

 constructor (eID: string, name: string) {
  this.empID = eID;
  this.fullName = name;
 }

 toString() {
  console.log(`EMP ID of ${fullName}: ${empID}`);
 }
}

class Customer implements Person {
 custID: string;
 fullName: string;

 constructor (cID: string, name: string) {
  this.custID = cID;
  this.fullName = name;
 }

 toString() {
  console.log(`Customer ID of ${fullName}: ${custID}`);
 }
}

Let's create the instance of the classes. As both the Employee and the Customer object is of type Person, let us create it this way:

letl  employee: Person = new Employee("E001", "Kunal");
let customer: Person = new Customer("C001", "");

Let's call the toString() method of both the instances and observe how it prints the person detail in the screen:

employee.toString(); // prints employee details
customer.toString(); // prints customer details

Interface Extending Another Interface

In TypeScript, you can also extend an interface from another interface. This allows you to copy the members of one interface into another. So, it gives a higher degree of flexibility by separating your interfaces into reusable components. For example, the TwoWheeler interface extends the Vehicle interface as below:

interface Vehicle {
}

interface TwoWheeler implements Vehicle {
}

In TypeScript, an interface can also extend multiple interfaces. For example, let's look at the following code where the TwoWheeler interface extends the Vehicle and Engine interfaces:

interface Vehicle {
}

interface Engine {
}

interface TwoWheeler extends Vehicle, Engine {
}

Interface Extending Classes

TypeScript allows you to extend an interface from a class type. In this case, the declaration of the members of the class gets inherited to the interface but not their implementations. This is as good as a class inheriting from an interface.

class Vehicle {
    constructor (public brand: string) { }

    getBrandName() {
        return brand;
    }
}

class Engine {
    constructor (public manufacturer: string) { }

    getManufacturerName() {
        return manufacturer;
    }
}

interface TwoWheeler extends Vehicle, Engine {
    getBrandName();
    getManufacturerName()
}

In other words, you can create an interface that extends a class and then it can be implemented in another class or interface.

Summary

So, today we have learned how to define an interface using the keyword interface, how to implement an interface in a class, how to extend an interface from another interface, and how to extend a class in an interface.

If you are from C# or Java background, an interface extending a class will be new to you in TypeScript. I hope you liked the tutorial.