The Angular styleguide provides best practices for using classes and interfaces in applications, but it does not offer guidance on organizing interfaces and model classes.
One common question that arises is: what are the best practices for organizing files and classes?
- Should domain classes and interfaces be stored in one file or separated into individual files?
- Is it better to keep model classes and interfaces in separate files or together?
- When a component or service has infrastructure classes and interfaces, how should they be organized (one file, multiple files, suffixes, etc.)?
- Which suffixes are commonly used for model files in the Angular ecosystem?
For example, which approach is preferred:
user-service.model.ts
export enum Gender {MALE, FEMALE}
export interface UserStatus {
id: string;
caption: string;
}
export interface User {
name: string;
gender: Gender;
status: UserStatus;
}
export interface UserListResponse extends ListResponse<User> {}
or
user-gender.model.ts
export enum Gender {MALE, FEMALE}
user-status.model.ts
export interface UserStatus {
id: string;
caption: string;
}
user.model.ts
export interface User {
name: string;
gender: Gender;
status: UserStatus;
}
user-list-response.model.ts
export interface UserListResponse extends ListResponse<User> {}
UPD: While it may vary based on team preferences and internal agreements, the question remains: "How do other developers handle this?"