In this lecture, we are going to create an interface to address the problem in our service.
The create user function has one argument which is the form data from the component.
The user data argument is not annotated.
The default type of our argument is any typescript is in strict mode which does not allow this type
for our arguments.
We're going to fix this problem by creating an interface.
It's been a while since we've talked about interfaces.
The interfaces are a feature for creating custom types.
The interface we will create will describe the contents of an object.
Any collection inside our out folder.
Create a folder called Models.
Whenever we create interfaces, they are considered to be models.
Let's talk about how to distinguish a model from an interface.
A model is a specific type of interface for describing the data in a database.
We can create interfaces for any type of object.
However, when we create models to describe the data in a database, we call it a model.
At the end of the day, a model is an interface.
The words can be interchangeable, but there is a difference.
If you're creating an interface for an object that doesn't get stored in a database, we wouldn't call
it a model.
It would just be called an interface.
Whenever we create a collection, we should pair it with a model.
The model will describe the documents or objects in the collection.
We will store our models inside the models directory.
Create a file called User Model Acts.
Inside this file, we will export an interface called I user under the default namespace.
There are five properties we are soaring in Firebase there.
The email password.
Name, age and phone number.
Let's add each of these to the interface.
There types will be streaming except for the age property.
The type for the age will be number.
Next, let's import this interface.
Switch over to the authentication service.
At the top of the file.
Import the user model.
Afterword, we will update the arguments for the create user function.
We will annotate the user data parameter with the AI user model.
At this point, the error should have gone away.
Hey everyone, since the latest release of Angular.
This solution may not completely work.
With the introduction of tight forms, Angular may throw errors from the register component.
To fix these errors, open the register dot component dots file.
At the top of the file.
Import the AI user model.
Next scroll to the create user function.
On this function assert the value property with the ask keyword.
The type will be the AI user interface.
These errors appear because the form controls allow for unknowable values which causes the conflict
with our interface to get around this issue.
We can assert the type.
However, we are not finished yet.
Scroll to the age variable.
Unlike the other fields, the age form, control stores, a number.
However, we have the initial value as a string, which is not acceptable by our interface.
The type of form controls value can be configured through a generic on the class.
Add the following generic number null.
Next, let's update the initial value to know.
By specifying that type.
This should remove any type errors from our app.
Let's head back to the original video.
We've completely refactored the service before moving on.
We should test if our service worked.
We didn't get the chance to test our service in the previous lecture in the browser.
Try creating a new user.
Success.
The user has been created.
Our service is working as expected.
We can move on to the next step before we do.
You may have noticed the title of this lecture in TypeScript.
It's completely acceptable to create a new type with a class instead of an interface.
Let me show you what I mean.
Back in the editor, switch over to the user model.
Next replace the interface keyword with the class keyword.
TypeScript will throw an error because the properties are not being initialized with a value.
Since this is a demonstration, we will quickly make the properties optional.
Just like that, we created a model with a class.
In some cases, projects may create models with classes instead of interfaces for our app.
They yield the same results.
So why would we want to create models with classes instead of interfaces?
In my opinion, they're both viable options.
We can use these features to add types to our properties in an object.
Describing the structure of an object will help with debugging an app.
Also, IntelliSense can work incredibly well when our objects are typed.
Aside from this point, there are some critical differences between them.
Classes are an official feature of Java scripts and comparison interfaces are a feature of TypeScript.
TypeScript is not supported in the browser.
It needs to be trans piled into JavaScript.
If we write a class, the class definition will get bundled with our app.
That can be useful if we have other uses for the class.
Interfaces are not so lucky during transformation.
They are completely deleted from our app.
The purpose of an interface is to type check our objects during transportation.
Once transportation is complete, they are removed from our app.
Another advantage classes offer over interfaces is methods.
We can define methods in a class with business logic.
If we want to write a method in an interface, we're out of luck.
Hopefully it's starting to become clear as to the differences between interfaces and classes.
Interfaces are useful for modeling basic objects.
If we don't need methods, interfaces are the way to go otherwise.
Use classes.
Keep in mind classes can increase the bundle size of our app interfaces.
Keep our bundle clean.
In my opinion, both options are plentiful.
Whenever I develop an app, I prefer to start with interfaces.
Once my needs begin to grow, I will consider switching to a class.
Use whichever solution you prefer.
In our case, we aren't going to need methods.
I'm going to revert the class to an interface.
In the next lecture, we are going to continue talking about type safety for collections.