What is Interface and How to use Interface in TypeScript?

Introduction

In this tutorial I will explain what is interface and how to use interface in typescript with examples and also more specifically what is advantage of using interface.

If you have worked with the programming languages like C# or Java you might already have an idea on what is interface, we have same concept here in typescript.

If you have never worked with interface let me give you details on what are they and how they work.

What is Interface in TypeScript?

As we know typescripts one of the great core feature is type checking so to define structure or type of our particular object in typescript we use interfaces.

So basically interface will tell you the details of a particular object that what are the properties does an object can have and what is the type of those properties.

It help us while writing complex application, you should alway use interface in your applications.

How to use Interface in TypeScript?

Most of the beginner programers don’t have an idea on how to use interface or most likely when to use interfaces in their code, even they are doing exceptional job at their work but just failed in writing maintainable or more readable code.

Here I am going to tell you exact important details on writing more readable code, basically interface helps to do that.

How to write interface, Syntax of writing Interface?

Syntax of Interface:

interface IntefaceName { 
}

First letter of every word in the name of the Interface should be capital.

Example of using Interface?

Let’s take a very simple example here to explain how to use interface in typescript, so here I am going to write a function to calculate the addition of two numbers.

let addition = (x, y) => {
  console.log(x + y);
};

addition(1, 2);

If you see in the above script we doing very simple operation there is syntactical error here the function will work and it will output 3.

But here is how problem start beginning, here we don’t what could value of x and y because they are defined, I know you might be thinking that we can use type annotation here but that is not the case.

In this example it is basic case but let’s say in your code you might 4 argument from the same user object and you might use same user object into multiple palace.

So we need a central way of defining it and this is where type script comes into play.

Now let’s write same program but using interface:

interface Calculate {
  x: number;
  y: number;
}

let addition = (calculate: Calculate) => {
  console.log(calculate.x + calculate.y);
};

addition({ x: 1, y: 1 });

As you can this is much cleaner way of doing it and we can also use in multiple places.

One important thing note the naming convention I am using for the interface here, so because I am introducing the new custom type I have used pascal naming convention meaning the first letter of every word in the name of the interface should be capital.

If you writing with me you note that while writing the above code I get IntelliSense from the code editor showing in below screen.

• 

What is Advantage of Using Interface in TypeScript?

This question can also be asked like why we use interface? what is the main reason?

I think you might already get clear idea already by reading above example but let me give you list on advantages of using interface in typescript:

• Interface makes our code more readable and maintainable.
• Interface helps us to provide detail definition of our object so it makes remember fast as such work fast on applications.
• Interface help up building or making complex application easy.
• Interface help our code completion and IntelliSense process work better.