In this lecture, we were going to add the type safety to our taps property.
The console is logging the Taps property.
The name of the object is called Query List.
We should annotate the tabs property with this object.
This step is completely optional.
However, I recommend it for code auto completion and type safety.
It's considered good practice.
Let me show you the problem we would encounter without asserting a type.
Open the tabs container component class file.
Inside the Nji, after a content in IT function, we are going to access the tabs property after typing
this property.
We can start to call the methods and properties stored on this object.
Unfortunately, we don't know what's inside this object.
Our editors don't know what methods can be found inside the tabs object.
It's not the biggest issue in the world.
We can write applications without code completion, but it's definitely a convenient feature.
The reason we don't get code completion is because of the return value of the decorator.
If we hover our mouse over the content children decorator, we can view its parameters and return value,
according to our editors.
The return value type is set to any that's not very helpful.
Luckily, by logging the object, we have an idea of what will be returned by the decorator function.
We are going to update the import statement for the angular core package.
We will include the query list object.
Next, we will annotate the tabs property to query list.
The query list object can store an array of items.
In our case, we're storing an array of tab components.
We will get an error because the query list object wants to know what type of object is going to be
stored in the array.
It's very strict.
We can set the type with generics.
We will set the Type two tab component.
We need to make one more change.
The initial value of our property is being rejected by TypeScript.
The value must be an instance of the query list object.
We can fix this issue by setting the value to a new instance of the query list object.
Alternatively, we could make this property optional properties can be made optional by adding a question
mark symbol before annotating the tape and removing the initial value.
Either solution works, it doesn't really matter.
The decorator will take care of setting the value for us.
The solution is to make TypeScript happy after making those changes.
Code completion should work back in the nji after content init function.
If we try to access the methods and properties in the tabs object, our editors will give us some recommendations
to reiterate.
We don't have to annotate the tabs property.
It's completely optional.
But as you can see, it's convenient and adds type safety.
In the next lecture, we will get back to the task at hand.