Should I have API models and UI models in an Angular app - asp.net

Question

I am working on an App where I am using .Net Core as my API, SQL Server as database, and Angular for the UI. I am following a course that does not provide much explanation on why he does what he does so I decided to post a couple of questions here after Googling did not help. In the angular app, the instructor uses an api-model (interface) to fetch the data from the API in a service using an http method, and then in the component .ts file he sets the observable response to a ui-model to use in the template.
Is it a standard or good practice to use api and ui models instead of just one in the front-end? - I am using DTOs and DAOs in the API and have an understanding of the why but not clear there is a benefit to doing this in the Front-end.
Is there an advantage to using an interface instead of a class when creating models? So far this is the first example I've seen of someone using an interface in Angular when creating a model.
UI and API models are identical. He basically puts the API fetched data into an API model and dumps it into a UI model to use in the template

Answer 1

When you say models I'm assuming you just mean defining a schema for your data (type, interface, or class). The main purpose of them is to make sure you as a developer do not make mistakes. If you have defined a data type and you try to access a property that doesn't exist, the typescript compiler will catch this. Another example is if you try to do some math with the id parameter, the compiler will tell you that's a string, not a number.
Yes, you should define your schemas on both sides, or you'll be making dumb mistakes like that all over the place. Plus this way you get intellisense and code completion.
As for the difference between interfaces and classes, there are three ways to define a data type in typescript:
Types
This is simply an object type where each property type is defined. Types do not support inheritance, and they do not have constructors.
type Fruit = {
name: string;
color: string;
weight: number;
similarFruits: Fruit[];
decompose: () => RottenFruit;
};
Interfaces
Interfaces are essentially the same as types but they can extend eachother, and classes can implement them.
interface Fruit {
name: string;
color: string;
}
interface Banana extends Fruit {
eat: () => string;
}
class BigYellowBanana implements Banana {
name: string;
color: string;
eat: () => string;
constructor() {
this.name = 'Big Yellow Banana';
this.color = 'Yellow';
this.eat = () => 'mmmm banana';
}
}
Classes
Classes are a whole other can of worms because they have all the functionality of an object oriented language. Most notably, a constructor that can be called with the new keyword.
class BigBanana extends SmallBanana implements Banana {
name: string;
color: string;
private eatMessage = 'mmmm banana';
constructor(color: string) {
this.color = color;
this.name = `Big ${color} Banana`;
}
eat() {
return this.eatMessage;
}
}
const greenBanana = new BigBanana('Green');
I apologize for my dumb examples.