Interfaces in Angular2 | InterfaceVsClass - Part25
This video is about Interfaces in Angular2.
To learn Angular2 from scratch and for beginners Please see the link below:
• What is AngularJS and What is Angular...
Watch More Videos On: / @codewithrohini1636 .
#Angular2 #Interfaces #ClassVsInterface
please read in detail about the Interfaces on the below link:
https://vegibit.com/how-to-use-an-int...
What is Interface in Angular?
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.
-The implementation for the interface members is provided by a class that implements the interface.
If a class that implements the interface fails to provide an implementation for all the interface members, the language compiler raises an error alerting the developer that something has been missed.
-We know TypeScript is a strongly typed language. This means every property we define in a TypeScript class has a type associated with it. Similarly, every method parameter and return type has a type.
-Let us understand this with an example.
Notice the below line of code in HeroComponent class. The property "Heroes" is defined as an array of any type.
Heroes: any[];
Since we do not have a Type for employee object, we specified the type as any.
There are 2 problems with the above line of code
1. For the object properties in the array, we do not get IntelliSense
2. Since we do not get IntelliSense, we are prone to making typographical errors and the compiler will not be able to flag them as errors. We will come to know about these errors only at runtime.
Let's create a Type for Heroes using an interface as shown below. Add a new TypeScript file to the hero folder. Name it hero.ts.
Defining an Angular Interface
-interface: An interface is defined using the interface keyword
-IHero: 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 IHero interface, then you can count on it having all of the properties listed above.
export interface IHero {
id:number;
name: string;
}
With this IHero interface in place, we can now import and use the interface type as the type for "Heroes" property. The code in HeroComponent class is shown below.
import { IHero} from './hero';
export class HeroComponent {
Heroes:IHero[];
}
Since we have specified a type for the "Heroes" property, we now get IntelliSense for the object properties in the array.
Смотрите видео Interfaces in Angular2 | InterfaceVsClass - Part25 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Code With Rohini 30 Август 2019, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 77 раз и оно понравилось 10 людям.