Follow us on X (Twitter)  Like us on Facebook  Connect with us on LinkedIn  Subscribe to our YouTube Channel  Subscribe to our WhatsApp Group

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


TypeScript Tutorial for beginners, Angular Tutorial for beginners, Getting started with TypeScript Tutorial for absolute beginners, Getting started with Angular for absolute beginners, Learn Angular from scratch, Learn Angular from scratch, Tutorial, TypeScript, TypeScript Tutorial, Getting started with TypeScript, How to implement an interface in TypeScript, How to extend an interface in an interface, Interface extending another interface, How to extend a class in an interface, Interface extending classes, -- 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. - Article authored by Kunal Chowdhury on .

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.

 

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

 

๐Ÿ‘‰ 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

 

 

 

Have a question? Or, a comment? Let's Discuss it below...

dhgate

Thank you for visiting our website!

We value your engagement and would love to hear your thoughts. Don't forget to leave a comment below to share your feedback, opinions, or questions.

We believe in fostering an interactive and inclusive community, and your comments play a crucial role in creating that environment.