Write Place to Put Interface for Service Angular 4

Since Angular leverages Typescript, developers can make use of strong typing. This is a big help during development, since your IDE will help catch errors before even building the application. That way, you can fix issues as soon as the IDE gives a notification that something went awry. Taking this concept one step further is the use of Interfaces. Although JavaScript itself does not have Interfaces, Typescript does. Interfaces are very common in object-oriented programming languages like Java, PHP, and C#. With Typescript, we can now also use them on the front end.

---

What is an Interface?

An Interface is a specification that identifies a related set of properties and methods to be implemented by a class. In other words, a given class agrees to support this specification when it implements that interface. The interface is simply the definition of the properties and methods, and the class that implements that interface has the actual code for each of those defined properties and methods. In Typescript, you can use the interface itself as a data type. Interfaces in Typescript are a development time only concept, they are not included in the final JavaScript after the build process.

---

Defining an Angular Interface

We can make an interface to be used with our GameListComponent component class now. First, let's add a game.ts file to the games directory.

Add the following code.

            export interface IGame {     gameId: number;     gameName: string;     gameCode: string;     releaseDate: string;     price: number;     description: string;     thumbRating: number;     imageUrl: string; }          

• interface : An interface is defined using the interface keyword
• IGame : The interface name which describes the class and has a capital I as a prefix

export : The export keyword is needed so Classes elsewhere can implement as they need to

• In the body of the interface which is in between the curly braces { }, the properties and methods are defined which *must* be created in the business object that makes use of this interface. In other words, if a class uses the above IGame interface, then you can count on it having all of the properties listed above.

---

Using an Interface as a Data Type

In addition to using an interface by leveraging the implements keyword, you may also use an interface as a data type. Let's see how to use our new IGame interface as a data type in the GameListComponent component class.

game-list.component.ts

            import { Component } from '@angular/core'; import { IGame } from './game';  @Component({     selector: 'game-list',     templateUrl: './game-list.component.html' }) export class GameListComponent {     pageTitle = 'Dynamic! Game List';     imageWidth = 45;     imageMargin = 1;     showImage = true;     listItem = 'Mario';     games: IGame[] = [...];      toggleImage(): void {         this.showImage = !this.showImage;     } }          

In the code above we first import the interface using import { IGame } from './game';. Then, we can use the interface name as the data type on the games property. That is the second highlighted line above.

---

How Does The Interface Help?

The games array now has a specific data type of IGame . What that means is that the data that populates that array must exactly match the properties set forth in the Interface which we created first. In other words, the array of games in now strongly typed. Our IDE should notify us if we are missing anything or if there is a misspelling. Let's test that out.

First we'll remove the gameId property from one of the games objects. Right away in the IDE we get some obvious errors and squiggly lines with the error message of TS2322: Type '{ 'gameName': string; 'gameCode': string; 'releaseDate': string; 'description': string; 'price': number; 'thumbRating': number; 'imageUrl': string; }' is not assignable to type 'IGame'.   Property 'gameId' is missing in type '{ 'gameName': string; 'gameCode': string; 'releaseDate': string; 'description': string; 'price': number; 'thumbRating': number; 'imageUrl': string; }'.

Basically the it's just saying, "Hey! You forgot the gameId property for this game!". So that is a great way to catch errors and make sure you didn't miss anything before you even try to build the application.

The same thing goes for misspellings. Say we have a misspelling on one of the properties. Here we misspell price as prices. Once again we see an error of TS2322: Type '{ 'gameId': number; 'gameName': string; 'gameCode': string; 'releaseDate': string; 'description': string; 'prices': number; 'thumbRating': number; 'imageUrl': string; }' is not assignable to type 'IGame'.   Object literal may only specify known properties, and "prices" does not exist in type 'IGame'.

Fix that spelling error and you're good! Interfaces go hand in hand with the strong typing feature of Typescript. Checking the result in the browser shows that the application works just as it did before. The benefit however is that our code is just a bit cleaner, and better organized by making use of that interface.

---

Summary

• Interfaces are used to define custom types such as the IGame interface we created above
• Interfaces promote strong typing in an Angular Application
• Define an interface using the interface keyword
• Ensure to use the export keyword when creating an interface
• In the interface body, define the needed properties, methods, and types
• Implement an interface on a class with the implements keyword
• Write the needed code for every property and method defined in the interface
• Use an interface as a data type by writing the name of the interface after a colon like so – games: IGame[] = []

Write Place to Put Interface for Service Angular 4

Source: https://vegibit.com/how-to-use-an-interface-in-angular/

Share this post