1
00:00:00,210 --> 00:00:04,530
In this lecture, we are going to add type safety to our collections.

2
00:00:04,770 --> 00:00:11,340
There's a huge problem with the way we're adding data to better understand open the authentication service

3
00:00:11,340 --> 00:00:11,820
file.

4
00:00:14,330 --> 00:00:17,090
Firebase is a very flexible database.

5
00:00:17,390 --> 00:00:20,120
Data can be added with little to no constraint.

6
00:00:20,480 --> 00:00:26,120
For example, the ad function allows us to pass in an object with various values.

7
00:00:26,390 --> 00:00:33,560
If we decide to insert another property to this object, Firebase won't complain at any point in time.

8
00:00:33,680 --> 00:00:37,010
We have the power to change the structure of a document.

9
00:00:37,460 --> 00:00:39,320
It's great to have flexibility.

10
00:00:39,590 --> 00:00:42,620
That doesn't mean we should be careless if we can.

11
00:00:42,770 --> 00:00:46,010
We should restrict the type of data inside a document.

12
00:00:46,250 --> 00:00:53,210
Luckily, the angular fire package has a couple of classes for helping us constrain data with type scripts.

13
00:00:53,600 --> 00:00:55,910
Hover your mouse over the ad function.

14
00:00:56,540 --> 00:00:59,660
The ad function has one argument called data.

15
00:00:59,990 --> 00:01:02,450
The type annotations says Unknown.

16
00:01:02,810 --> 00:01:08,390
TypeScript is unaware of the type of data that can be added to a document for a collection.

17
00:01:08,790 --> 00:01:14,490
Regardless, it'll allow us to create users anyway if we want type safety.

18
00:01:14,540 --> 00:01:16,730
We're going to need help type scripts.

19
00:01:17,210 --> 00:01:22,460
We can fix this problem by adding a generic before invoking the collection function.

20
00:01:22,490 --> 00:01:24,050
We will add a generic.

21
00:01:24,350 --> 00:01:30,110
The collection function will use the generic to help it understand the type of data that can be added

22
00:01:30,110 --> 00:01:31,130
to the collection.

23
00:01:31,540 --> 00:01:34,790
We've created an interface for describing a document.

24
00:01:35,090 --> 00:01:38,990
We can re-use it pass in the I user interface.

25
00:01:41,430 --> 00:01:43,890
That should resolve our issues from before.

26
00:01:44,190 --> 00:01:50,730
If we hover our mouse over the ad function again, the data argument will limit objects with the same

27
00:01:50,730 --> 00:01:52,680
properties as our interface.

28
00:01:53,040 --> 00:01:56,790
There's one problem with our generic hovering over the error.

29
00:01:57,060 --> 00:02:01,840
Our editor will tell us the password property is missing from this object.

30
00:02:02,520 --> 00:02:04,680
The generic is working as intended.

31
00:02:04,860 --> 00:02:08,070
We must add the password property to the object.

32
00:02:08,250 --> 00:02:11,700
However, we shouldn't store the password in the database.

33
00:02:11,880 --> 00:02:12,780
It's unsafe.

34
00:02:13,080 --> 00:02:17,760
It's safer to let Firebase handle passwords in the authentication service.

35
00:02:18,090 --> 00:02:21,480
We can resolve this issue by making the password optional.

36
00:02:23,610 --> 00:02:26,520
Update the password property to be optional.

37
00:02:28,990 --> 00:02:32,410
This solution fixes one problem, but creates another.

38
00:02:32,650 --> 00:02:37,750
If we go back to service, the errors surrounding the ad function have gone away.

39
00:02:38,110 --> 00:02:44,500
Scrolling to the top of the function, an error is being thrown by the create user with email function

40
00:02:44,800 --> 00:02:47,110
lets hover our mouse over the error.

41
00:02:47,650 --> 00:02:54,610
The error is stating the password argument is required by making the password optional in the interface.

42
00:02:54,910 --> 00:02:57,670
This function assumes the password may be empty.

43
00:02:57,910 --> 00:03:03,110
We should assure TypeScript the password is not empty at the top of the function.

44
00:03:03,130 --> 00:03:04,960
Create a conditional statement.

45
00:03:07,330 --> 00:03:12,430
The condition will check if the user data Corp password property is not empty.

46
00:03:14,960 --> 00:03:17,540
If it is empty, we will throw a new error.

47
00:03:17,810 --> 00:03:21,800
The error message will say the following password not provided.

48
00:03:27,590 --> 00:03:30,830
After adding this condition, the error has gone away.

49
00:03:31,100 --> 00:03:32,240
We're almost finished.

50
00:03:32,480 --> 00:03:37,550
There's one last optimization I want to make before considering this solution complete.

51
00:03:37,910 --> 00:03:43,040
If we go back to the add function, you may not like the code that precedes this function.

52
00:03:43,310 --> 00:03:46,490
We have to write a lot of code to access the collection.

53
00:03:47,120 --> 00:03:53,550
It's possible we may forget to add the generic every time you want to interact with the user's collection.

54
00:03:53,600 --> 00:03:57,860
We will type this portion of the code instead of typing this code.

55
00:03:58,010 --> 00:04:00,530
We should create a reference with a property.

56
00:04:00,860 --> 00:04:04,530
It'll make our code more readable at the top of the class.

57
00:04:04,550 --> 00:04:07,880
Create a private property called user's collection.

58
00:04:10,410 --> 00:04:12,150
The property will be private.

59
00:04:12,420 --> 00:04:16,440
We don't want the collection to be accessed outside of the class.

60
00:04:16,769 --> 00:04:19,050
It should be contained within the service.

61
00:04:19,410 --> 00:04:25,080
External classes must call the appropriate methods for interacting with the user's collection.

62
00:04:25,440 --> 00:04:30,390
The type for this property will be a class called Angular Fire Store Collection.

63
00:04:32,980 --> 00:04:40,360
The collection class is defined by the angular fire package, we must import this class at the top of

64
00:04:40,360 --> 00:04:48,700
the file update, the import statement for the angular slash fire slash compat slash firestorm package

65
00:04:48,700 --> 00:04:50,260
to include this class.

66
00:04:52,870 --> 00:04:58,210
This class is a helper class for annotating properties in our services to a collection.

67
00:04:58,600 --> 00:05:03,220
We are telling TypeScript this property will hold a reference to a collection.

68
00:05:03,670 --> 00:05:08,680
We can specify the type of data stored in the collection by adding a generic.

69
00:05:09,040 --> 00:05:12,280
Let's set the generic to the I user interface.

70
00:05:14,810 --> 00:05:21,020
We're declaring the property, but we're not initializing it with a value, initializing this property

71
00:05:21,020 --> 00:05:24,980
cannot be done until the service for the database has been injected.

72
00:05:25,310 --> 00:05:31,520
We will initialize this property from the constructor function, set the user's collection property

73
00:05:31,550 --> 00:05:33,950
to the DB collection function.

74
00:05:36,420 --> 00:05:38,640
We will select the user's collection.

75
00:05:41,110 --> 00:05:43,660
Next, let's update the ad function.

76
00:05:43,960 --> 00:05:46,900
Scroll to the bottom of the Create user function.

77
00:05:47,260 --> 00:05:51,910
We will replace this portion of the code with the user's collection property.

78
00:05:54,430 --> 00:05:59,590
We should make sure typing is working if we hover our mouse over the ad function.

79
00:05:59,710 --> 00:06:03,490
TypeScript will contain data to the eye user interface.

80
00:06:03,760 --> 00:06:04,360
Perfect.

81
00:06:04,690 --> 00:06:10,840
We've successfully added typing to a collection if we need to interact with the user's collection in

82
00:06:10,840 --> 00:06:15,790
other functions, we can access it through the property in the next lecture.

83
00:06:15,880 --> 00:06:19,930
We are going to make more adjustments to the create user function.