1 00:00:00,240 --> 00:00:04,950 In this lecture, we were going to add the type safety to our taps property. 2 00:00:05,250 --> 00:00:08,100 The console is logging the Taps property. 3 00:00:08,460 --> 00:00:11,220 The name of the object is called Query List. 4 00:00:11,550 --> 00:00:15,060 We should annotate the tabs property with this object. 5 00:00:15,420 --> 00:00:17,550 This step is completely optional. 6 00:00:17,760 --> 00:00:22,200 However, I recommend it for code auto completion and type safety. 7 00:00:22,470 --> 00:00:24,270 It's considered good practice. 8 00:00:24,750 --> 00:00:28,740 Let me show you the problem we would encounter without asserting a type. 9 00:00:29,130 --> 00:00:32,130 Open the tabs container component class file. 10 00:00:34,620 --> 00:00:42,270 Inside the Nji, after a content in IT function, we are going to access the tabs property after typing 11 00:00:42,270 --> 00:00:43,170 this property. 12 00:00:43,260 --> 00:00:47,490 We can start to call the methods and properties stored on this object. 13 00:00:47,850 --> 00:00:51,330 Unfortunately, we don't know what's inside this object. 14 00:00:51,660 --> 00:00:56,370 Our editors don't know what methods can be found inside the tabs object. 15 00:00:57,000 --> 00:00:59,010 It's not the biggest issue in the world. 16 00:00:59,250 --> 00:01:04,769 We can write applications without code completion, but it's definitely a convenient feature. 17 00:01:05,160 --> 00:01:10,650 The reason we don't get code completion is because of the return value of the decorator. 18 00:01:10,950 --> 00:01:17,970 If we hover our mouse over the content children decorator, we can view its parameters and return value, 19 00:01:18,540 --> 00:01:20,150 according to our editors. 20 00:01:20,220 --> 00:01:24,720 The return value type is set to any that's not very helpful. 21 00:01:24,990 --> 00:01:31,440 Luckily, by logging the object, we have an idea of what will be returned by the decorator function. 22 00:01:31,890 --> 00:01:37,110 We are going to update the import statement for the angular core package. 23 00:01:37,530 --> 00:01:40,290 We will include the query list object. 24 00:01:42,890 --> 00:01:47,390 Next, we will annotate the tabs property to query list. 25 00:01:49,970 --> 00:01:53,600 The query list object can store an array of items. 26 00:01:53,990 --> 00:01:57,500 In our case, we're storing an array of tab components. 27 00:01:57,710 --> 00:02:03,110 We will get an error because the query list object wants to know what type of object is going to be 28 00:02:03,110 --> 00:02:04,190 stored in the array. 29 00:02:04,490 --> 00:02:05,510 It's very strict. 30 00:02:05,810 --> 00:02:07,820 We can set the type with generics. 31 00:02:08,090 --> 00:02:10,370 We will set the Type two tab component. 32 00:02:12,880 --> 00:02:14,800 We need to make one more change. 33 00:02:15,040 --> 00:02:18,970 The initial value of our property is being rejected by TypeScript. 34 00:02:19,330 --> 00:02:22,960 The value must be an instance of the query list object. 35 00:02:23,290 --> 00:02:28,830 We can fix this issue by setting the value to a new instance of the query list object. 36 00:02:31,450 --> 00:02:37,780 Alternatively, we could make this property optional properties can be made optional by adding a question 37 00:02:37,780 --> 00:02:42,100 mark symbol before annotating the tape and removing the initial value. 38 00:02:44,770 --> 00:02:47,740 Either solution works, it doesn't really matter. 39 00:02:47,950 --> 00:02:50,950 The decorator will take care of setting the value for us. 40 00:02:51,160 --> 00:02:55,490 The solution is to make TypeScript happy after making those changes. 41 00:02:55,510 --> 00:03:01,030 Code completion should work back in the nji after content init function. 42 00:03:01,210 --> 00:03:08,290 If we try to access the methods and properties in the tabs object, our editors will give us some recommendations 43 00:03:08,950 --> 00:03:09,820 to reiterate. 44 00:03:09,970 --> 00:03:12,630 We don't have to annotate the tabs property. 45 00:03:12,910 --> 00:03:14,320 It's completely optional. 46 00:03:14,500 --> 00:03:18,310 But as you can see, it's convenient and adds type safety. 47 00:03:18,610 --> 00:03:22,180 In the next lecture, we will get back to the task at hand.