1 00:00:00,150 --> 00:00:05,490 In this lecture, we are going to create an interface to address the problem in our service. 2 00:00:05,820 --> 00:00:11,370 The create user function has one argument which is the form data from the component. 3 00:00:11,730 --> 00:00:14,820 The user data argument is not annotated. 4 00:00:15,180 --> 00:00:22,020 The default type of our argument is any typescript is in strict mode which does not allow this type 5 00:00:22,020 --> 00:00:23,370 for our arguments. 6 00:00:23,820 --> 00:00:27,090 We're going to fix this problem by creating an interface. 7 00:00:27,360 --> 00:00:30,120 It's been a while since we've talked about interfaces. 8 00:00:30,450 --> 00:00:33,840 The interfaces are a feature for creating custom types. 9 00:00:34,200 --> 00:00:38,280 The interface we will create will describe the contents of an object. 10 00:00:38,280 --> 00:00:41,190 Any collection inside our out folder. 11 00:00:41,310 --> 00:00:43,500 Create a folder called Models. 12 00:00:45,940 --> 00:00:49,870 Whenever we create interfaces, they are considered to be models. 13 00:00:50,140 --> 00:00:54,010 Let's talk about how to distinguish a model from an interface. 14 00:00:56,690 --> 00:01:01,880 A model is a specific type of interface for describing the data in a database. 15 00:01:02,180 --> 00:01:05,570 We can create interfaces for any type of object. 16 00:01:05,930 --> 00:01:11,630 However, when we create models to describe the data in a database, we call it a model. 17 00:01:11,900 --> 00:01:14,930 At the end of the day, a model is an interface. 18 00:01:15,200 --> 00:01:18,770 The words can be interchangeable, but there is a difference. 19 00:01:19,220 --> 00:01:25,220 If you're creating an interface for an object that doesn't get stored in a database, we wouldn't call 20 00:01:25,220 --> 00:01:25,880 it a model. 21 00:01:26,120 --> 00:01:28,310 It would just be called an interface. 22 00:01:30,760 --> 00:01:34,630 Whenever we create a collection, we should pair it with a model. 23 00:01:34,930 --> 00:01:38,950 The model will describe the documents or objects in the collection. 24 00:01:39,250 --> 00:01:42,950 We will store our models inside the models directory. 25 00:01:43,300 --> 00:01:47,200 Create a file called User Model Acts. 26 00:01:49,740 --> 00:01:56,250 Inside this file, we will export an interface called I user under the default namespace. 27 00:01:58,740 --> 00:02:02,530 There are five properties we are soaring in Firebase there. 28 00:02:02,550 --> 00:02:04,170 The email password. 29 00:02:04,350 --> 00:02:06,630 Name, age and phone number. 30 00:02:06,990 --> 00:02:09,479 Let's add each of these to the interface. 31 00:02:09,780 --> 00:02:13,440 There types will be streaming except for the age property. 32 00:02:13,740 --> 00:02:16,050 The type for the age will be number. 33 00:02:22,720 --> 00:02:25,300 Next, let's import this interface. 34 00:02:25,510 --> 00:02:28,150 Switch over to the authentication service. 35 00:02:30,590 --> 00:02:32,060 At the top of the file. 36 00:02:32,060 --> 00:02:33,740 Import the user model. 37 00:02:36,380 --> 00:02:40,790 Afterword, we will update the arguments for the create user function. 38 00:02:41,150 --> 00:02:45,560 We will annotate the user data parameter with the AI user model. 39 00:02:48,030 --> 00:02:50,640 At this point, the error should have gone away. 40 00:02:51,030 --> 00:02:53,640 Hey everyone, since the latest release of Angular. 41 00:02:53,760 --> 00:02:55,860 This solution may not completely work. 42 00:02:55,950 --> 00:03:01,350 With the introduction of tight forms, Angular may throw errors from the register component. 43 00:03:01,590 --> 00:03:06,450 To fix these errors, open the register dot component dots file. 44 00:03:08,830 --> 00:03:10,120 At the top of the file. 45 00:03:10,210 --> 00:03:12,130 Import the AI user model. 46 00:03:14,480 --> 00:03:17,420 Next scroll to the create user function. 47 00:03:19,860 --> 00:03:23,940 On this function assert the value property with the ask keyword. 48 00:03:24,210 --> 00:03:26,730 The type will be the AI user interface. 49 00:03:29,130 --> 00:03:35,100 These errors appear because the form controls allow for unknowable values which causes the conflict 50 00:03:35,100 --> 00:03:37,890 with our interface to get around this issue. 51 00:03:37,920 --> 00:03:39,330 We can assert the type. 52 00:03:39,630 --> 00:03:41,490 However, we are not finished yet. 53 00:03:41,790 --> 00:03:43,830 Scroll to the age variable. 54 00:03:46,200 --> 00:03:50,100 Unlike the other fields, the age form, control stores, a number. 55 00:03:50,340 --> 00:03:55,740 However, we have the initial value as a string, which is not acceptable by our interface. 56 00:03:55,980 --> 00:04:01,070 The type of form controls value can be configured through a generic on the class. 57 00:04:01,080 --> 00:04:03,750 Add the following generic number null. 58 00:04:06,080 --> 00:04:09,670 Next, let's update the initial value to know. 59 00:04:12,030 --> 00:04:13,590 By specifying that type. 60 00:04:13,800 --> 00:04:16,560 This should remove any type errors from our app. 61 00:04:16,800 --> 00:04:19,110 Let's head back to the original video. 62 00:04:20,410 --> 00:04:24,250 We've completely refactored the service before moving on. 63 00:04:24,400 --> 00:04:26,410 We should test if our service worked. 64 00:04:26,740 --> 00:04:31,600 We didn't get the chance to test our service in the previous lecture in the browser. 65 00:04:31,660 --> 00:04:33,430 Try creating a new user. 66 00:04:38,730 --> 00:04:39,480 Success. 67 00:04:39,690 --> 00:04:41,310 The user has been created. 68 00:04:41,610 --> 00:04:43,800 Our service is working as expected. 69 00:04:44,130 --> 00:04:47,280 We can move on to the next step before we do. 70 00:04:47,490 --> 00:04:51,480 You may have noticed the title of this lecture in TypeScript. 71 00:04:51,690 --> 00:04:57,000 It's completely acceptable to create a new type with a class instead of an interface. 72 00:04:57,270 --> 00:04:58,740 Let me show you what I mean. 73 00:04:59,190 --> 00:05:02,490 Back in the editor, switch over to the user model. 74 00:05:04,900 --> 00:05:09,160 Next replace the interface keyword with the class keyword. 75 00:05:11,690 --> 00:05:17,180 TypeScript will throw an error because the properties are not being initialized with a value. 76 00:05:17,540 --> 00:05:22,010 Since this is a demonstration, we will quickly make the properties optional. 77 00:05:27,180 --> 00:05:30,510 Just like that, we created a model with a class. 78 00:05:30,750 --> 00:05:37,380 In some cases, projects may create models with classes instead of interfaces for our app. 79 00:05:37,530 --> 00:05:39,330 They yield the same results. 80 00:05:39,690 --> 00:05:44,550 So why would we want to create models with classes instead of interfaces? 81 00:05:45,270 --> 00:05:48,060 In my opinion, they're both viable options. 82 00:05:48,240 --> 00:05:52,740 We can use these features to add types to our properties in an object. 83 00:05:53,040 --> 00:05:57,000 Describing the structure of an object will help with debugging an app. 84 00:05:57,270 --> 00:06:02,070 Also, IntelliSense can work incredibly well when our objects are typed. 85 00:06:02,670 --> 00:06:06,810 Aside from this point, there are some critical differences between them. 86 00:06:07,140 --> 00:06:14,070 Classes are an official feature of Java scripts and comparison interfaces are a feature of TypeScript. 87 00:06:14,400 --> 00:06:16,890 TypeScript is not supported in the browser. 88 00:06:17,100 --> 00:06:20,010 It needs to be trans piled into JavaScript. 89 00:06:20,280 --> 00:06:24,630 If we write a class, the class definition will get bundled with our app. 90 00:06:25,020 --> 00:06:28,500 That can be useful if we have other uses for the class. 91 00:06:29,070 --> 00:06:32,670 Interfaces are not so lucky during transformation. 92 00:06:32,790 --> 00:06:35,160 They are completely deleted from our app. 93 00:06:35,490 --> 00:06:40,650 The purpose of an interface is to type check our objects during transportation. 94 00:06:40,980 --> 00:06:44,820 Once transportation is complete, they are removed from our app. 95 00:06:45,270 --> 00:06:49,440 Another advantage classes offer over interfaces is methods. 96 00:06:49,680 --> 00:06:52,950 We can define methods in a class with business logic. 97 00:06:53,250 --> 00:06:56,760 If we want to write a method in an interface, we're out of luck. 98 00:06:57,330 --> 00:07:03,510 Hopefully it's starting to become clear as to the differences between interfaces and classes. 99 00:07:03,900 --> 00:07:07,290 Interfaces are useful for modeling basic objects. 100 00:07:07,500 --> 00:07:12,130 If we don't need methods, interfaces are the way to go otherwise. 101 00:07:12,150 --> 00:07:13,230 Use classes. 102 00:07:13,440 --> 00:07:18,660 Keep in mind classes can increase the bundle size of our app interfaces. 103 00:07:18,660 --> 00:07:20,100 Keep our bundle clean. 104 00:07:20,550 --> 00:07:23,280 In my opinion, both options are plentiful. 105 00:07:23,550 --> 00:07:27,660 Whenever I develop an app, I prefer to start with interfaces. 106 00:07:28,080 --> 00:07:32,400 Once my needs begin to grow, I will consider switching to a class. 107 00:07:32,730 --> 00:07:34,830 Use whichever solution you prefer. 108 00:07:36,280 --> 00:07:39,250 In our case, we aren't going to need methods. 109 00:07:39,490 --> 00:07:42,400 I'm going to revert the class to an interface. 110 00:07:44,850 --> 00:07:50,400 In the next lecture, we are going to continue talking about type safety for collections.