In this lecture, we are going to add type safety to our collections.
There's a huge problem with the way we're adding data to better understand open the authentication service
file.
Firebase is a very flexible database.
Data can be added with little to no constraint.
For example, the ad function allows us to pass in an object with various values.
If we decide to insert another property to this object, Firebase won't complain at any point in time.
We have the power to change the structure of a document.
It's great to have flexibility.
That doesn't mean we should be careless if we can.
We should restrict the type of data inside a document.
Luckily, the angular fire package has a couple of classes for helping us constrain data with type scripts.
Hover your mouse over the ad function.
The ad function has one argument called data.
The type annotations says Unknown.
TypeScript is unaware of the type of data that can be added to a document for a collection.
Regardless, it'll allow us to create users anyway if we want type safety.
We're going to need help type scripts.
We can fix this problem by adding a generic before invoking the collection function.
We will add a generic.
The collection function will use the generic to help it understand the type of data that can be added
to the collection.
We've created an interface for describing a document.
We can re-use it pass in the I user interface.
That should resolve our issues from before.
If we hover our mouse over the ad function again, the data argument will limit objects with the same
properties as our interface.
There's one problem with our generic hovering over the error.
Our editor will tell us the password property is missing from this object.
The generic is working as intended.
We must add the password property to the object.
However, we shouldn't store the password in the database.
It's unsafe.
It's safer to let Firebase handle passwords in the authentication service.
We can resolve this issue by making the password optional.
Update the password property to be optional.
This solution fixes one problem, but creates another.
If we go back to service, the errors surrounding the ad function have gone away.
Scrolling to the top of the function, an error is being thrown by the create user with email function
lets hover our mouse over the error.
The error is stating the password argument is required by making the password optional in the interface.
This function assumes the password may be empty.
We should assure TypeScript the password is not empty at the top of the function.
Create a conditional statement.
The condition will check if the user data Corp password property is not empty.
If it is empty, we will throw a new error.
The error message will say the following password not provided.
After adding this condition, the error has gone away.
We're almost finished.
There's one last optimization I want to make before considering this solution complete.
If we go back to the add function, you may not like the code that precedes this function.
We have to write a lot of code to access the collection.
It's possible we may forget to add the generic every time you want to interact with the user's collection.
We will type this portion of the code instead of typing this code.
We should create a reference with a property.
It'll make our code more readable at the top of the class.
Create a private property called user's collection.
The property will be private.
We don't want the collection to be accessed outside of the class.
It should be contained within the service.
External classes must call the appropriate methods for interacting with the user's collection.
The type for this property will be a class called Angular Fire Store Collection.
The collection class is defined by the angular fire package, we must import this class at the top of
the file update, the import statement for the angular slash fire slash compat slash firestorm package
to include this class.
This class is a helper class for annotating properties in our services to a collection.
We are telling TypeScript this property will hold a reference to a collection.
We can specify the type of data stored in the collection by adding a generic.
Let's set the generic to the I user interface.
We're declaring the property, but we're not initializing it with a value, initializing this property
cannot be done until the service for the database has been injected.
We will initialize this property from the constructor function, set the user's collection property
to the DB collection function.
We will select the user's collection.
Next, let's update the ad function.
Scroll to the bottom of the Create user function.
We will replace this portion of the code with the user's collection property.
We should make sure typing is working if we hover our mouse over the ad function.
TypeScript will contain data to the eye user interface.
Perfect.
We've successfully added typing to a collection if we need to interact with the user's collection in
other functions, we can access it through the property in the next lecture.
We are going to make more adjustments to the create user function.