When to use Interface and Model in TypeScript / Angular
Question:
I recently watched a Tutorial on Angular 2 with TypeScript, but unsure when to use an Interface and when to use a Model for data structures.
Why Interfaces?
interface is a virtual structure that only exists within the context of TypeScript. The TypeScript compiler uses interfaces solely for type-checking purposes. Once your code is transpiled to its target language, it will be stripped from its interfaces - JavaScript isn’t typed.
interface User {
id: number;
username: string;
}
// inheritance
interface UserDetails extends User {
birthdate: Date;
biography?: string; // use the '?' annotation to mark this property as optionnal
}
Mapping server response to an interface is straight forward if you are using HttpClient from HttpClientModule if you are using latest angular version.
getUsers() :Observable<User[]> {
return this.http.get<User[]>(url); // no need for '.map((res: Response) => res.json())'
}
when to use interfaces:
- You only need the definition for the server data without introducing additional overhead for the final output.
- You only need to transmit data without any behaviors or logic (constructor initialization, methods)
- You do not instantiate/create objects from your interface very often
- You need to define contracts/configurations for your systems (global configurations)
Why Classes?
A class defines the blueprints of an object. They express the logic, methods, and properties these objects will inherit.
class User {
id: number;
username: string;
constructor(id :number, username: string) {
this.id = id;
this.username = username.replace(/^\s+|\s+$/g, ''); // trim whitespaces and new lines
}
}
// inheritance
class UserDetails extends User {
birthdate: Date;
biography?: string;
constructor(id :number, username: string, birthdate:Date, biography? :string ) {
super(id,username);
this.birthdate = ...;
}
}
when to use classes:
- You instantiate your class and change the instances state over time.
- Instances of your class will need methods to query or mutate its state
- When you want to associate behaviors with data more closely;
- You enforce constraints on the creation of your instances.
- If you only write a bunch of properties assignments in your class, you might consider using a type instead.