1
00:00:00,680 --> 00:00:05,480
In this video we're going to try to condense down our ads user marker method an ad company marker into

2
00:00:05,480 --> 00:00:07,910
one single method instead.

3
00:00:07,910 --> 00:00:12,500
So we're gonna first try one approach that is going to look like it's gonna work out pretty well but

4
00:00:12,500 --> 00:00:14,380
it's going to have a distinct downside.

5
00:00:14,390 --> 00:00:19,670
Well then finally refactor into the final good approach that we're going to stick with for this application.

6
00:00:19,710 --> 00:00:22,890
And just about all the future applications we work on as well.

7
00:00:23,030 --> 00:00:27,080
So to get started I'm going to find ad company marker right here and I'm just gonna come in out the

8
00:00:27,080 --> 00:00:28,170
entire thing.

9
00:00:28,340 --> 00:00:32,180
We're going to eventually delete this but I want to just leave the code around for right now just we

10
00:00:32,180 --> 00:00:36,020
can refer back to it if we need to refer to any of the code inside there.

11
00:00:36,690 --> 00:00:41,580
It's not going to focus on AD user marker instead to make this method a little bit more generic and

12
00:00:41,580 --> 00:00:44,250
indicate that it will work for both a company and a user.

13
00:00:44,250 --> 00:00:48,800
I'm going to first change the name to be only ad marker like so.

14
00:00:48,830 --> 00:00:51,550
So here's approach number one to solving our problem.

15
00:00:51,650 --> 00:00:57,470
I'm going to change the argument type right here to say that we can pass in an instance of a user or

16
00:00:58,070 --> 00:00:59,400
a company.

17
00:00:59,630 --> 00:01:02,570
Remember that is what that little pipe operator means.

18
00:01:02,660 --> 00:01:05,780
And again that is the character right above the enter key on your keyboard.

19
00:01:05,780 --> 00:01:10,070
You really have to hit shift and then like backslash to get that thing.

20
00:01:10,120 --> 00:01:12,980
Now we might want to update the argument name as well really quickly.

21
00:01:13,030 --> 00:01:16,780
So I got to change the argument name to something like mapping all to indicate that this is something

22
00:01:16,780 --> 00:01:22,270
that could be mapped or like placed on the map as a marker and maybe that argument name does make a

23
00:01:22,270 --> 00:01:25,500
lot of sense but I think it will work out for now.

24
00:01:25,610 --> 00:01:25,880
OK.

25
00:01:25,910 --> 00:01:29,480
So let's talk about exactly what this or operator does right here.

26
00:01:29,480 --> 00:01:34,400
We said previously we took a quick glance at this we just said this means or mapping all can be or this

27
00:01:34,400 --> 00:01:37,790
argument can be either an instance of a user or a company.

28
00:01:37,820 --> 00:01:40,030
But what does that really do.

29
00:01:40,040 --> 00:01:43,810
It's a quick diagram back over here all right.

30
00:01:43,810 --> 00:01:49,180
So in this diagram we've got an instance of a company in an instance of a user and then I listed out

31
00:01:49,240 --> 00:01:54,430
all the different properties that a company has and all the different properties that a user has along

32
00:01:54,430 --> 00:01:56,470
with their respective types.

33
00:01:56,590 --> 00:02:02,410
Anytime that we use and or operator on an argument here's what is happening behind the scenes on that

34
00:02:02,470 --> 00:02:08,380
argument that we get access to inside of this method typescript is going to do a little powering down

35
00:02:08,410 --> 00:02:13,340
operation to limit the number of properties that we can actually reference on maps Bill.

36
00:02:13,390 --> 00:02:18,880
So anytime we use this or operator typescript is going to take a look at the two different types and

37
00:02:18,880 --> 00:02:26,230
it's gonna say you can only do your first two properties on that argument if they exist in both of these

38
00:02:26,230 --> 00:02:32,080
different types so typescript is going to look at company it's going to look at the property name company

39
00:02:32,080 --> 00:02:33,220
name right here.

40
00:02:33,220 --> 00:02:37,950
Remember that's one of the properties that company has typescript is then going to say OK.

41
00:02:37,960 --> 00:02:39,850
Does user have a company name.

42
00:02:39,850 --> 00:02:41,350
Nope it sure doesn't.

43
00:02:41,350 --> 00:02:48,530
So we are not allowed to refer to company name off of this argument right here.

44
00:02:50,140 --> 00:02:53,890
Typescript is then going to look at catch phrase does user have a catch phrase.

45
00:02:53,890 --> 00:02:54,210
Nope.

46
00:02:54,500 --> 00:03:01,130
OK we are not allowed to refer to that and finally it's going to go onto location and say OK does user

47
00:03:01,130 --> 00:03:02,450
have a location.

48
00:03:02,450 --> 00:03:03,640
Yep it does.

49
00:03:03,850 --> 00:03:07,880
And is it it's type a object that has allowed to much longitude that are both numbers.

50
00:03:08,360 --> 00:03:09,400
Yep sure is.

51
00:03:09,610 --> 00:03:09,860
OK.

52
00:03:09,860 --> 00:03:15,270
We are allowed to refer to location on that argument typescript is then going to take a look at the

53
00:03:15,270 --> 00:03:19,140
user type and iterate through all of this things properties as well.

54
00:03:19,140 --> 00:03:20,120
It's going to say okay.

55
00:03:20,130 --> 00:03:21,780
Does company have a name.

56
00:03:21,780 --> 00:03:23,100
No it doesn't.

57
00:03:23,100 --> 00:03:23,300
Okay.

58
00:03:23,310 --> 00:03:25,930
We are not allowed to refer to that property.

59
00:03:26,010 --> 00:03:27,300
Does company have a location.

60
00:03:27,300 --> 00:03:28,470
Yep it does.

61
00:03:28,470 --> 00:03:30,710
Okay we're allowed to refer to that.

62
00:03:30,780 --> 00:03:36,150
So the result of this or operate a right here is that typescript is going to limit the number of properties

63
00:03:36,360 --> 00:03:38,850
that we can refer to on this magical thing.

64
00:03:39,210 --> 00:03:48,870
And you can actually see that in action very easily by running out mapping all map of all sorry.

65
00:03:48,880 --> 00:03:53,150
I got one of those these MacBook Pros that is like double typing characters right now.

66
00:03:53,260 --> 00:03:57,220
Anyways if you then write out capital and in a dot it will list out all the different properties that

67
00:03:57,220 --> 00:04:02,020
you are safe to refer to and so you'll notice that the only property we can refer to here is location

68
00:04:02,350 --> 00:04:08,550
because that's the only commonality between user and company so that's why we are allowed to refer to

69
00:04:08,600 --> 00:04:13,080
mapping all dot location dot lap down here and the same thing for the longitude as well.

70
00:04:13,260 --> 00:04:19,980
But if we had to refer to say a user's name or a company's company name we would not be allowed to.

71
00:04:20,200 --> 00:04:22,630
All right so this actually kind of works out pretty well for us right.

72
00:04:22,670 --> 00:04:26,480
Because I don't think we really care about is a common property between user and company.

73
00:04:26,480 --> 00:04:30,820
We only care about location dot lat and location dot longitude.

74
00:04:30,980 --> 00:04:34,130
So this definitely does work out for us.

75
00:04:34,130 --> 00:04:37,950
However I would suggest that there is still a big downside to this approach.

76
00:04:37,970 --> 00:04:44,270
This code works but it's not perfect and here's why let's start to think about what would happen at

77
00:04:44,270 --> 00:04:45,680
some point in time in the future.

78
00:04:45,680 --> 00:04:47,180
Here's my diagram.

79
00:04:47,180 --> 00:04:48,120
Here we go.

80
00:04:48,200 --> 00:04:52,100
So let's think about what would happen in the future if we started to have other things that we want

81
00:04:52,100 --> 00:04:56,160
to map on our map or show as a marker on the map.

82
00:04:56,180 --> 00:04:58,520
Right now we just have user and company.

83
00:04:58,520 --> 00:05:04,030
But what if we also had something like I don't know would be something else we want to show on a map.

84
00:05:04,030 --> 00:05:10,660
How about like how about like a customization of a company maybe like a car lot you know a place that

85
00:05:10,660 --> 00:05:15,550
sells cars and so we would make a new class called car lot.

86
00:05:15,550 --> 00:05:22,040
Maybe we also want to show something that's like maybe a park so maybe we have a new thing called Park

87
00:05:22,060 --> 00:05:22,440
dot.

88
00:05:22,500 --> 00:05:28,000
Yes we've got to have a class called Park and so on for every one of these new things that we want to

89
00:05:28,000 --> 00:05:28,760
show on our map.

90
00:05:28,780 --> 00:05:32,710
We would have to add on an additional import statement into mapped out to us.

91
00:05:32,860 --> 00:05:38,920
So I'd have to import Park I would have to import car lot and so on and for every one of these additional

92
00:05:38,920 --> 00:05:40,060
things we might want to map.

93
00:05:40,090 --> 00:05:44,140
We're gonna have to add in an additional or a case to our method.

94
00:05:44,140 --> 00:05:52,240
So ad marker capital can be a user or a company or a park or a car lot or whatever else and I think

95
00:05:52,240 --> 00:05:52,920
you get the idea.

96
00:05:52,910 --> 00:05:57,140
Here so every time we want to expand this repertoire of things we can map.

97
00:05:57,150 --> 00:06:01,700
We're gonna have to do a lot of adding on here and if there's eventually like 30 things we want to map

98
00:06:02,190 --> 00:06:06,140
well we would have a really huge method signature.

99
00:06:06,270 --> 00:06:11,460
So this is not really a great approach right now number one because it's not super scalable and number

100
00:06:11,460 --> 00:06:18,600
two because it's introducing a very tight coupling between our map class and every other class we have

101
00:06:18,600 --> 00:06:21,720
in our application that we want to show on the map.

102
00:06:22,550 --> 00:06:25,290
It's like I said this is an solution.

103
00:06:25,330 --> 00:06:29,900
It is a solution it would work but I still don't think this is the best way of going.

104
00:06:30,250 --> 00:06:31,690
So let's take one more quick pause.

105
00:06:31,700 --> 00:06:35,980
We can come back next video and finally go to the real solution for this problem.

106
00:06:36,100 --> 00:06:37,380
So see you in just a minute.