How to define an Interface in TypeScript? -- TypeScript Tutorial for beginners

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 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.

👉 TypeScript Tutorial - Getting started with TypeScript

Class implementing interfaces

Just like C# and Java, you can create contract for classes by implementing Interface. 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:

let 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 interfaces

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

interface Vehicle {
}

interface TwoWheeler implements Vehicle {
}

In TypeScript, an interface can also extend multiple interfaces. For example, let's see the following code where TwoWheeler interface extends 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 simple words, you can create an interface that extends a class and then 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 and interface from another interface and how to extend a class in an interface.

If you are from C# or Java background, interface extending a class will be new to you in TypeScript. Hope you liked the tutorial. Don't forget to checkout my other posts from the TypeScript Tutorial series. You can find the link below.

👉 TypeScript Tutorial - Getting started with TypeScript