1
00:00:00,840 --> 00:00:04,420
In the last video, we got a good solution to our ad markhor issue.

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

3
00:00:07,560 --> 00:00:11,820
Remember, the whole idea here is that we define instructions on how you can be malleable.

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

5
00:00:17,850 --> 00:00:18,620
to add marker.

6
00:00:19,320 --> 00:00:21,630
So take a look at the impact on custom map.

7
00:00:21,630 --> 00:00:26,690
Now, inside a custom map, we no longer have any direct references to user or company.

8
00:00:27,270 --> 00:00:31,050
So that means that these two import statements at the top of the file can be deleted.

9
00:00:31,890 --> 00:00:38,530
So we now have a standalone custom map class that we could very easily reuse on future projects as well.

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

11
00:00:45,060 --> 00:00:51,510
file, because as long as you have any other object on any other project you work on that satisfies

12
00:00:51,510 --> 00:00:52,320
this interface.

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

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

15
00:01:01,980 --> 00:01:05,820
All right, so the last thing I want to do inside this file, I'm going to delete that ad company marker

16
00:01:05,820 --> 00:01:07,800
method down here, we don't need this anymore.

17
00:01:10,550 --> 00:01:15,830
Now, last thing I'm going to do is flip back over to index tortillas and we need to fix up the references

18
00:01:15,830 --> 00:01:17,090
to the methods that we deleted.

19
00:01:17,360 --> 00:01:19,370
So add user marker no longer exists.

20
00:01:19,370 --> 00:01:23,690
It's now going to be add marker and same thing for add company marker as well.

21
00:01:23,690 --> 00:01:25,100
That's also going to be add marker.

22
00:01:26,210 --> 00:01:31,490
So notice how TypeScript has no complaints about these two lines of code, remember, here's what's

23
00:01:31,490 --> 00:01:35,750
going on behind the scenes when we tried to pass in user to add marker.

24
00:01:37,050 --> 00:01:42,570
TypeScript is going to take a look at Ad Merker, it's going to see that the argument must be of type

25
00:01:42,570 --> 00:01:43,170
m'appelle.

26
00:01:44,040 --> 00:01:48,900
To be mockable, you have to have a location with the latitude longitude, so behind the scenes typescript

27
00:01:48,900 --> 00:01:57,380
is automatically inspecting what type user is and it's checking to see if user satisfies the matchable

28
00:01:57,390 --> 00:01:58,140
interface.

29
00:01:58,980 --> 00:02:03,720
So TypeScript is going to look at our definition of what a user is that's going to see that user has

30
00:02:03,720 --> 00:02:06,990
a location, a latitude and longitude that are numbers.

31
00:02:07,260 --> 00:02:11,130
And because it has those, it satisfies the m'appelle interface.

32
00:02:11,580 --> 00:02:17,880
So TypeScript has no issue with us whatsoever passing a user into this method because user correctly

33
00:02:17,880 --> 00:02:19,620
implements that interface.

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

35
00:02:25,470 --> 00:02:27,920
invisible and occurs behind the scenes.

36
00:02:28,350 --> 00:02:34,290
So we do not have to add in any code whatsoever to say, hey, typescript, make sure that user is matchable.

37
00:02:34,290 --> 00:02:35,760
We didn't do anything like that.

38
00:02:36,180 --> 00:02:41,280
We never said anything inside of our user class to say specifically, hey, this thing is supposed to

39
00:02:41,280 --> 00:02:41,850
be makeable.

40
00:02:42,030 --> 00:02:42,900
Never did it.

41
00:02:43,410 --> 00:02:46,590
TypeScript is doing that comparison for us automatically.

42
00:02:47,570 --> 00:02:54,230
We refer to this as an implicit check typescript is implicitly or kind of behind the scenes automatically

43
00:02:54,380 --> 00:02:59,900
making sure that user has the correct properties with the correct types inside of it to be an argument,

44
00:02:59,900 --> 00:03:00,710
to add marker.

45
00:03:01,750 --> 00:03:04,360
All right, so last thing here, I'm going to save inducts.

46
00:03:05,490 --> 00:03:11,220
I'm going to flip back over my browser, refresh and everything still works as expected, perfect.

47
00:03:12,290 --> 00:03:17,960
OK, so this looks pretty good, so we've now seen something really awesome around interfaces, but

48
00:03:17,960 --> 00:03:18,710
we're not done yet.

49
00:03:18,980 --> 00:03:19,910
Let's take a quick pause.

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

51
00:03:23,600 --> 00:03:25,510
So quick break and I'll see you in just a minute.