1
00:00:00,570 --> 00:00:05,490
In this video, we're going to try to condense down our or marker method and add company marker into

2
00:00:05,490 --> 00:00:06,960
one single method instead.

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

4
00:00:12,330 --> 00:00:13,960
but it's going to have a distinct downside.

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

6
00:00:19,620 --> 00:00:22,310
and just about all the future applications we work on as well.

7
00:00:22,980 --> 00:00:26,970
So to get started, I'm going to find ad company marker right here and I'm just going to comment out

8
00:00:26,970 --> 00:00:27,780
the entire thing.

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

10
00:00:32,040 --> 00:00:35,700
so we can refer back to it if we need to refer to any of the code inside their.

11
00:00:36,760 --> 00:00:41,590
And I'm going to focus on add user marker instead to make this method a little bit more generic and

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

13
00:00:44,230 --> 00:00:47,770
I'm going to change the name to be only add marker like so.

14
00:00:48,790 --> 00:00:50,950
So here's approach number one to solving our problem.

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

16
00:00:57,970 --> 00:00:58,710
a company.

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

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

19
00:01:05,780 --> 00:01:08,920
You'll probably have to hit shift and then, like, backslash to get that thing.

20
00:01:10,010 --> 00:01:13,700
Now, we might want to update the argument name as well really quickly, so I'm going to change the

21
00:01:13,700 --> 00:01:18,030
argument name to something like matchable to indicate that this is something that can be mapped or like

22
00:01:18,080 --> 00:01:19,790
placed on the map as a marker.

23
00:01:20,540 --> 00:01:24,170
And maybe that argument name doesn't make a lot of sense, but I think it will work out for now.

24
00:01:25,470 --> 00:01:29,480
OK, so let's talk about exactly what this or operator does right here.

25
00:01:29,490 --> 00:01:34,260
We said previously we took a quick glance at this and we just said this means or matchable can be or

26
00:01:34,260 --> 00:01:37,770
this argument can be either an instance of a user or a company.

27
00:01:37,780 --> 00:01:39,450
But what does that really do?

28
00:01:40,050 --> 00:01:42,450
It's a quick diagram back over here.

29
00:01:43,480 --> 00:01:48,610
All right, so in this diagram, we've got an instance of a company in an instance of a user, and then

30
00:01:48,610 --> 00:01:52,810
I listed out all the different properties that a company has and all the different properties that a

31
00:01:52,810 --> 00:01:55,720
user has along with their respective types.

32
00:01:56,470 --> 00:02:02,440
Anytime that we use an OR operator on an argument, here's what is happening behind the scenes on that

33
00:02:02,440 --> 00:02:08,410
argument that we get access to inside of this method, TypeScript is going to do a little powering down

34
00:02:08,410 --> 00:02:12,610
operation to limit the number of properties that we can actually reference on unmatchable.

35
00:02:13,340 --> 00:02:18,880
So any time we use this or operator type script is going to take a look at the two different types and

36
00:02:18,880 --> 00:02:26,560
it's going to say you can only refer to properties on that argument if they exist in both of these different

37
00:02:26,560 --> 00:02:27,070
types.

38
00:02:28,250 --> 00:02:32,450
So TypeScript is going to look at company, it's going to look at the property name, company name right

39
00:02:32,450 --> 00:02:35,210
here, remember, that's one of the properties that company has.

40
00:02:36,080 --> 00:02:39,440
TypeScript is then going to say, OK, does user have a company name?

41
00:02:39,770 --> 00:02:40,910
Nope, it sure doesn't.

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

43
00:02:50,090 --> 00:02:53,670
TypeScript is then going to look at catchphrase, does user have a catchphrase?

44
00:02:53,810 --> 00:02:54,180
Nope.

45
00:02:54,410 --> 00:02:56,390
OK, we are not allowed to refer to that.

46
00:02:58,200 --> 00:03:01,840
And finally, it's going to go on to location and say, OK, does user have a location?

47
00:03:02,370 --> 00:03:03,260
Yup, it does.

48
00:03:03,750 --> 00:03:07,860
And is it its type a object that has allowed to monitor that are both numbers?

49
00:03:08,280 --> 00:03:09,330
Yep, sure is.

50
00:03:09,570 --> 00:03:12,560
OK, we are allowed to refer to location on that argument.

51
00:03:13,790 --> 00:03:17,960
TypeScript is then going to take a look at the user type and iterate through all of these things properties

52
00:03:17,960 --> 00:03:18,440
as well.

53
00:03:19,130 --> 00:03:21,260
It's going to say, OK, does company have a name?

54
00:03:21,710 --> 00:03:22,610
No, it doesn't.

55
00:03:23,000 --> 00:03:25,160
OK, we are not allowed to refer to that property.

56
00:03:25,940 --> 00:03:27,180
Does company have a location?

57
00:03:27,230 --> 00:03:28,190
Yep, it does.

58
00:03:28,430 --> 00:03:29,980
OK, we're allowed to refer to that.

59
00:03:30,710 --> 00:03:36,170
So the result of this or operator right here is that TypeScript is going to limit the number of properties

60
00:03:36,290 --> 00:03:38,360
that we can refer to on this m'appelle thing.

61
00:03:39,140 --> 00:03:44,690
And you can actually see that in action very easily by writing out matchable.

62
00:03:45,550 --> 00:03:52,550
OK, Map Knuble, sorry, I got one of those these MacBook pros that is like double typing characters

63
00:03:52,550 --> 00:03:53,000
right now.

64
00:03:53,180 --> 00:03:57,260
Anyways, if you rent right out makeable and then a dot will list out all the different properties that

65
00:03:57,260 --> 00:03:58,510
you are safe to refer to.

66
00:03:58,700 --> 00:04:03,230
And so you'll notice that the only property we can refer to here is location, because that's the only

67
00:04:03,230 --> 00:04:05,720
commonality between user and company.

68
00:04:06,840 --> 00:04:11,580
So that's why we are allowed to refer to matchable location, let down here and the same thing for the

69
00:04:11,580 --> 00:04:12,480
longitude as well.

70
00:04:13,210 --> 00:04:18,420
But if we had to refer to, say, a user's name or a company's company name, we would not be allowed

71
00:04:18,420 --> 00:04:18,750
to.

72
00:04:20,110 --> 00:04:23,260
All right, so this actually kind of works out pretty well for us, right, because the only thing we

73
00:04:23,260 --> 00:04:26,470
really care about is a common property between user and company.

74
00:04:26,480 --> 00:04:30,460
We only care about location and location longitude.

75
00:04:30,920 --> 00:04:33,320
So this definitely does work out for us.

76
00:04:34,060 --> 00:04:37,880
However, I would suggest that there is still a big downside to this approach.

77
00:04:37,930 --> 00:04:40,570
This code works, but it's not perfect.

78
00:04:40,570 --> 00:04:41,380
And here's why.

79
00:04:42,670 --> 00:04:45,490
Let's start to think about what would happen at some point in time in the future.

80
00:04:45,640 --> 00:04:46,560
Where's my diagram?

81
00:04:47,100 --> 00:04:47,570
Here we go.

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

83
00:04:52,120 --> 00:04:55,340
to map on our map or show as a marker on the map.

84
00:04:56,110 --> 00:04:58,000
Right now, we just have user and company.

85
00:04:58,450 --> 00:05:00,250
But what if we also had something like.

86
00:05:00,250 --> 00:05:00,880
I don't know.

87
00:05:02,420 --> 00:05:07,610
Would be something else we want to show on a map, how about like how about like a customization of

88
00:05:07,610 --> 00:05:11,500
a company, maybe like a car lot, a place that sells cars.

89
00:05:12,170 --> 00:05:14,830
And so we would make a new class called car lot.

90
00:05:15,500 --> 00:05:19,670
Maybe we also want to show something that's like maybe a park.

91
00:05:20,060 --> 00:05:22,850
So maybe we have a new thing called Harcourts.

92
00:05:23,120 --> 00:05:25,580
We've got to have a class called Park and so on.

93
00:05:26,240 --> 00:05:30,290
For every one of these new things that we want to show on our map, we would have to add on an additional

94
00:05:30,290 --> 00:05:32,420
import statement into sports.

95
00:05:32,810 --> 00:05:36,740
So I'd have to import park, I would have to import carlot and so on.

96
00:05:37,250 --> 00:05:41,270
And for every one of these additional things we might want to map, we're going to have to add in an

97
00:05:41,270 --> 00:05:43,520
additional or case to our method.

98
00:05:44,090 --> 00:05:44,990
So add markhor.

99
00:05:44,990 --> 00:05:51,790
Matchable can be a user or a company or a park or a car lot or whatever else.

100
00:05:51,830 --> 00:05:53,210
And I think you get the idea here.

101
00:05:54,100 --> 00:05:58,240
So every time we want to expand this repertoire of things we can map, we're going to have to do a lot

102
00:05:58,240 --> 00:05:59,190
of adding on here.

103
00:05:59,200 --> 00:06:04,570
And if there's eventually, like 30 things we want to map, well, we would have a really huge method

104
00:06:04,570 --> 00:06:05,140
signature.

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

106
00:06:11,210 --> 00:06:18,230
number two, because it's introducing a very tight coupling between our map class and every other class

107
00:06:18,230 --> 00:06:21,560
we have in our application that we want to show on the map.

108
00:06:22,470 --> 00:06:25,090
So, like I said, this is an OK solution.

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

110
00:06:30,180 --> 00:06:31,620
So let's take one more quick pause.

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

112
00:06:36,000 --> 00:06:37,380
So I'll see you in just a minute.