Click here to Skip to main content
13,703,177 members
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

1.7K views
1 bookmarked
Posted 22 Jun 2018
Licenced CPOL

How to Define an Interface in TypeScript? -- TypeScript Tutorial for Beginners

, 22 Jun 2018
Rate this:
Please Sign up or sign in to vote.
Today, in this TypeScript Tutorial, we will learn how to work with Interfaces in TypeScript. Continue reading to learn more.

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

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 on 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, 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 an 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 check out my other posts from the TypeScript Tutorial series. You can find the link below.

👉 TypeScript Tutorial - Getting started with TypeScript

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Kunal Chowdhury «IN»
Software Developer (Senior)
India India
Kunal Chowdhury is a Microsoft "Windows Platform Development" MVP (Most Valuable Professional), a Codeproject Mentor, Telerik Developer Expert, Nokia Developer Champion, Windows 10 Champion, Microsoft Rockstar, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession.

He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows Store (WinRT) app development. He posts his findings, articles, tutorials in his technical blog and CodeProject.

Book authored:

Connect with me on:

My CodeProject Awards/Prizes:


You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web06-2016 | 2.8.180906.1 | Last Updated 22 Jun 2018
Article Copyright 2018 by Kunal Chowdhury «IN»
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid