1
00:00:00,900 --> 00:00:04,890
In the last video we got a good solution to our ad marker issue.

2
00:00:04,950 --> 00:00:07,560
Now I repeated the same thing and there like five or six times.

3
00:00:07,570 --> 00:00:12,070
Remember the whole idea here is that we defined instructions on how you can be malleable.

4
00:00:12,150 --> 00:00:17,850
So as long as another class has a location with allowed to longitude their numbers it can be an argument

5
00:00:17,850 --> 00:00:19,180
to add marker.

6
00:00:19,390 --> 00:00:23,210
So take a look at the impact on custom map now inside a custom map.

7
00:00:23,220 --> 00:00:28,950
We no longer have any direct references to user or company so that means that these two import statements

8
00:00:28,950 --> 00:00:31,950
at the top of the file can be deleted.

9
00:00:31,950 --> 00:00:38,190
So we now have a stand alone custom map class that we could very easily reuse on future projects as

10
00:00:38,190 --> 00:00:39,430
well.

11
00:00:39,450 --> 00:00:45,480
In fact if you ever want to show a Google map in the future save this file like really save this file

12
00:00:46,020 --> 00:00:52,740
because as long as you have any other object on any other project you work on that satisfies this interface.

13
00:00:52,740 --> 00:00:55,580
This class is going to work for you.

14
00:00:55,620 --> 00:01:02,000
You can use this exact class right here to show a Google map and then show different markers on it.

15
00:01:02,090 --> 00:01:02,550
All right.

16
00:01:02,570 --> 00:01:06,670
The last thing I want to do inside this file I'm gonna delete that ad company marker method down here.

17
00:01:06,680 --> 00:01:09,770
We don't need this anymore looks good.

18
00:01:10,630 --> 00:01:15,820
Now last thing I'm going to do is flip back over to index dot T.S. and we need to fix up the references

19
00:01:15,820 --> 00:01:17,270
to the methods that we deleted.

20
00:01:17,440 --> 00:01:19,390
So add a user marker no longer exists.

21
00:01:19,390 --> 00:01:23,710
It's now going to be ad marker and same thing for ad company marker as well.

22
00:01:23,710 --> 00:01:29,550
That's also going to be ad marker so notice how typescript has no complaints about these two lines of

23
00:01:29,550 --> 00:01:30,750
code.

24
00:01:30,810 --> 00:01:32,830
Remember here's what's going on behind the scenes.

25
00:01:32,970 --> 00:01:39,400
When we tried to pass in user to ad marker typescript is going to take a look at ad marker.

26
00:01:39,430 --> 00:01:44,840
It's going to see that the argument must be of type malleable to be malleable.

27
00:01:44,860 --> 00:01:47,120
You have to have location with the latitude longitude.

28
00:01:47,290 --> 00:01:54,190
So behind the scenes typescript is automatically inspecting what type user is and it's checking to see

29
00:01:54,220 --> 00:01:58,910
if user satisfies the mapping tool interface.

30
00:01:59,050 --> 00:02:02,370
So typescript is going to look at our definition of what a user is.

31
00:02:02,370 --> 00:02:07,380
That's going to see that user has a location a latitude an analog to that are numbers.

32
00:02:07,390 --> 00:02:11,650
And because it has those it satisfies the magical interface.

33
00:02:11,650 --> 00:02:17,860
So typescript has no issue with us whatsoever passing a user into this method because user correctly

34
00:02:17,920 --> 00:02:20,410
implements that interface.

35
00:02:20,560 --> 00:02:25,450
Remember that that comparison of looking at user and making sure it has all the correct properties is

36
00:02:25,450 --> 00:02:28,340
invisible and it occurs behind the scenes.

37
00:02:28,420 --> 00:02:34,100
So we did not have to add in any code whatsoever to say hey typescript makes sure that user is mapping

38
00:02:34,100 --> 00:02:36,150
all we didn't do anything like that.

39
00:02:36,220 --> 00:02:41,350
We never said anything inside of our user class to say specifically hey this thing is supposed to be

40
00:02:41,350 --> 00:02:42,000
malleable.

41
00:02:42,070 --> 00:02:49,660
Never did it typescript is doing that comparison for us automatically we refer to this as an implicit

42
00:02:49,660 --> 00:02:56,440
check typescript is implicitly or kind of behind the scenes automatically making sure that user has

43
00:02:56,440 --> 00:03:01,750
the correct properties with the correct types inside of it to be an argument to add marker.

44
00:03:01,890 --> 00:03:06,970
All right so last thing here I'm gonna save index dot to yes I'm going to flip back over my browser

45
00:03:07,210 --> 00:03:10,750
refresh and everything still works as expected.

46
00:03:10,750 --> 00:03:12,320
Perfect.

47
00:03:12,420 --> 00:03:12,640
OK.

48
00:03:12,670 --> 00:03:13,940
So this looks pretty good.

49
00:03:13,990 --> 00:03:19,030
So he now seen something really awesome around interfaces but we're not done yet.

50
00:03:19,030 --> 00:03:19,890
Let's take a quick pause.

51
00:03:19,900 --> 00:03:23,680
When come back the next video we're going to add in one more feature to this application.

52
00:03:23,680 --> 00:03:25,530
So quick break and I'll see you in just a minute.