How To Define An Interface In Angular?

Introduction

The interface is a specification identifying a related set of properties and methods. So, a class commits to supporting the specification by implementing the interface. That means the class includes code for each property and method identified in the interface. We can then use the interface as a data type. ES5 and ES2015 do not support interfaces, but TypeScript does, so interfaces are transpiled out and are not found in the resulting JavaScript. This means that interfaces are development time only. Their purpose is to provide strong typing and better tooling support as we build, debug, and maintain our code.

Using Strongly type property

One of the benefits of using TypeScript is its strong typing. Every property has a type, every method has a return type, and every method parameter has a type. strong typing helps minimize errors through better syntax checking and tooling. In some cases, but, we have a property or method that does not have a predefined type, such as our cars array here. We defined our cars array as any, which negates the benefits of strong typing. It specify custom types, we can define an interface.

Define Interface

Here is an example of a TypeScript interface properties.

//car.ts

export interface ICar 
{
	Name:string,
	Color:string,
	Price:number,
	width: number;
	Height: number;
	ImageUrl: string;
	calculateDiscount(percent: number): number;
}

We define an interface using the interface keyword, followed by the interface name. which is often the name of the business object that the interface describes. By many naming conventions, the interface is prefixed. with an I for an interface, though some TypeScript developers leave off this prefix.

The export keyword, thereby making it available for use anywhere in the application. The body of the interface defines the set of properties and methods appropriate for this business object. For each property, the interface includes the property name, property data type. For each method, the interface includes the method name, the list of parameters along with their datatypes and the method return type.

Import Interface

here, we import the Interface

import { ICaar } from './car';
export class CarListComponent {
	Name: string = 'Tesla';
	Color: 'Red';
	Price:80000;
	showImage: boolean = false;
	
	Cars: ICar[] = [...]
	
	toogleImage(): void {
		this.showImage = !this.showImage;
	}
}

To use the interface as a data type, we import the interface, then use the interface name as the data type. We are back in the sample application looking at the car-list-component.ts

Here, we see that we defined our cars array as any, so let’s create an interface that defines what a car is.

import { Component } from '@angular/core';

@Component({
	selector: 'root-car',
	templateUrl: './car-list.component.html'
})
export class CarListComponent {
	width: number=250;
	Height: number=250;
	cars: ICar[] = [
	{
	  "Name":"Ferrari",
	  "Color":"yello",
	  "Price":$60000,
	  "ImageUrl":'http://example.com/ferrari.jpg'
	},
	{
	  "Name":"Tesla",
	  "Color":"red",
	  "Price":$70000,
	  "ImageUrl":'http://example.com/tesla.jpg'
	},
	{
	  "Name":"Benz",
	  "Color":"white",
	  "Price": $80000,
	  "ImageUrl":'http://example.com/benz.jpg'
	}
	]
}

Now, we can use this interface as our data type in the car list component. We don’t even have to view it in the browser to see that something is amiss. So this is a good demonstration of one of the benefits of strong typing. Notice that we get IntelliSense now for these properties, another great benefit of strong typing. Let’s check this out in the browser. Now everything works as it did. In our interface file, we could define a class for the car business object.

//car.ts

export interface ICar 
{
	Name:string,
	Color:string,
	Price:number,
	width: number;
	Height: number;
	ImageUrl: string;
	calculateDiscount(percent: number): number;
}

export class CAr implements ICar
{
   constructor(public Name:string,
	public Color:string,
	public Price:number,
	public width: number,
	public Height: number,
	public ImageUrl: string)
	{
	}
	
	calculateDiscount(percent: number): number {
	return this.price - (this.price * percent / 100);
	}
}

In general, we only create a business object class. if that class provides some functionality that we want to use throughout our application. such as calculateDiscount method, and if want to create a business object at some point in the future. then we definitely want to add the I prefix to our interface. but for our sample application, we don’t need any methods, so we don’t really need a car class.