Angular Interface is a typescript feature. It is used at compile time as a custom data type and it won't be included in the final converted javascript.
In Typescript we have data types like string, number, boolean, etc.
Interface contains set of properties and methods and are abstract. Interface defines a contract for the implementing class and offers Type Safety.
You can create interface with .ts extension.
ng g interface interfacename
In my previous example, I have created an Orders interface with two properties.
ng g interface orders
This command will create a file called orders.ts
Default structure of Angular Interface will look like,
export interface Orders {
}
I have created two properties name and type. Both of type string.
The Orders interface is used by the OrderComponent class. To use the interface, first import the interface in OrderComponet class. orders property in OrdersComponent is of custom type Orders array i.e., Orders[]
I include a third property in the interface called price of type number.
export interface Orders {
name: string;
type: string;
price: number;
}
In orders array after name and type, it will show a suggestion(IntelliSense) to include price property and if it is not included in OrderComponent, it will so compile time error.
Compile time error
Property 'price' is missing in type '{ name: string; type: string; }' but required in type 'Orders'.ts(2741)
orders.ts(4, 5): 'price' is declared here.