Click here to Skip to main content
14,981,456 members
Articles / Programming Languages / Typescript
Article
Posted 22 Jun 2018

Tagged as

Stats

3.4K views
1 bookmarked

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

Rate me:
Please Sign up or sign in to vote.
5.00/5 (3 votes)
22 Jun 2018CPOL2 min read
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.

JavaScript
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:

JavaScript
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:

JavaScript
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:

JavaScript
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:

JavaScript
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:

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

JavaScript
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»
Technical Lead
India India

Kunal Chowdhury is a former Microsoft "Windows Platform Development" MVP (Most Valuable Professional, 2010 - 2018), a Codeproject Mentor, Speaker in various Microsoft events, Author, passionate Blogger and a Senior Technical Lead 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 app development. He posts his findings, articles, tutorials in his technical blog (www.kunal-chowdhury.com) and CodeProject.


Books authored:


Connect with Kunal on:





Comments and Discussions

 
-- There are no messages in this forum --