1 00:00:01,240 --> 00:00:04,930 We've now seen several different ways of putting together ad marker in a bad fashion. 2 00:00:04,930 --> 00:00:09,220 So in this video we're going to focus on the correct solution or maybe not the correct solution maybe 3 00:00:09,220 --> 00:00:10,710 the best solution. 4 00:00:10,710 --> 00:00:10,900 All right. 5 00:00:10,930 --> 00:00:13,710 Let's get to it just a quick reminder here. 6 00:00:13,720 --> 00:00:18,430 Right now the issue with our current approach is that custom map has a direct dependency on all the 7 00:00:18,430 --> 00:00:22,180 different classes inside of our application that we might want to show on the map. 8 00:00:22,200 --> 00:00:25,920 So a custom map depends upon user it depends upon company. 9 00:00:25,990 --> 00:00:31,870 And if we ever had like a car lot or park or anything else custom app would depend upon them as well. 10 00:00:31,870 --> 00:00:37,900 So to fix this issue we're going to invert this dependency so to speak rather than custom map depending 11 00:00:37,900 --> 00:00:39,760 upon all these different classes. 12 00:00:39,850 --> 00:00:46,840 We're going to say hey class user if you want to work with a map it is up to you to satisfy the maps 13 00:00:46,840 --> 00:00:49,910 requirements and company if you want to show up on the map. 14 00:00:49,960 --> 00:00:52,960 You have to satisfy the maps requirements. 15 00:00:52,960 --> 00:00:54,940 So how are we going to invert that dependency. 16 00:00:54,940 --> 00:00:58,500 Well here's what we're gonna do at the top of the custom abductees file. 17 00:00:58,540 --> 00:01:03,130 We're going to add in a little bit of configuration and its configuration up there is essentially going 18 00:01:03,130 --> 00:01:11,400 to be some instructions on how a object can be an argument to the ad marker function so the very top 19 00:01:11,420 --> 00:01:16,970 the File we're going to say hey every other class inside of our application every other class if you 20 00:01:16,970 --> 00:01:23,480 want to be shown on the map or in other words if you want to be a argument to add marker here's what 21 00:01:23,480 --> 00:01:30,050 you have to do so inside those directions we're gonna say to show up on the map you have to have a location 22 00:01:30,050 --> 00:01:32,880 property remember that's the key. 23 00:01:32,980 --> 00:01:38,710 You have to have a location property that is an object and that object has to have a latitude that is 24 00:01:38,710 --> 00:01:44,850 a number and a longitude that is a number every other class as long as you have a location with Latin 25 00:01:44,850 --> 00:01:51,240 long and you are eligible to be added as an argument to add marker. 26 00:01:51,250 --> 00:01:53,230 So how are we gonna put together those directions. 27 00:01:53,650 --> 00:01:56,380 Well we're going to make use of interfaces. 28 00:01:56,410 --> 00:02:01,550 Remember we spoke interfaces a couple of videos ago and we looked at a diagram very similar to this. 29 00:02:01,630 --> 00:02:08,050 We spoke about how we can use an interface to kind of behave as like a gatekeeper of sorts to a method. 30 00:02:08,050 --> 00:02:13,990 So we're going to create an interface that defines what it means to be mapping all we're going to define 31 00:02:14,000 --> 00:02:19,810 in this interface a set of instructions to all the other classes inside of application that tell all 32 00:02:19,810 --> 00:02:24,780 those other classes how they can be eligible to be an argument to add marker. 33 00:02:25,240 --> 00:02:31,600 So then it's going to be up to all of those other classes to opt in to being malleable and they can 34 00:02:31,600 --> 00:02:38,120 be so by having that location property with the latitude and longitude that our numbers so that's how 35 00:02:38,120 --> 00:02:44,210 we're going to kind of invert this dependency rather than saying oh our ad marker method has to accommodate 36 00:02:44,270 --> 00:02:52,160 a user and a company and a park and so on instead user has to choose to fulfill the interface or satisfy 37 00:02:52,160 --> 00:02:57,540 the interface by having the correct properties with the correct names in the correct types. 38 00:02:57,590 --> 00:03:04,530 If a user does that then user has qualified to be an argument to add marker all right. 39 00:03:04,540 --> 00:03:08,870 So this is like one of the prime best examples I can show you of interfaces. 40 00:03:08,950 --> 00:03:13,810 And once again like I've said a billion times we're going to see this relationship right here in every 41 00:03:13,810 --> 00:03:15,890 application we're going to work on. 42 00:03:16,150 --> 00:03:19,780 So let's try putting together an implementation right now and see what it looks like. 43 00:03:19,810 --> 00:03:25,450 So to get started I flip back over to my editor and at the top of custom map I'm going to define an 44 00:03:25,480 --> 00:03:28,960 interface called mapping all. 45 00:03:29,210 --> 00:03:36,820 So this right here is gonna be our instructions to every other class on how they can be an argument 46 00:03:39,230 --> 00:03:41,600 to add marker. 47 00:03:41,600 --> 00:03:45,860 So every other class can look at this interface and say oh I want to be mapping all I want to be an 48 00:03:45,860 --> 00:03:47,250 argument to add marker. 49 00:03:47,250 --> 00:03:50,930 And if they want to all they have to do is satisfy the properties we list in here. 50 00:03:51,560 --> 00:03:57,410 So to be mapping tool to be an argument to add marker you have to have a location property that is an 51 00:03:57,410 --> 00:04:04,190 object and that object has to have a latitude property that is a number and a LNG or longitude that 52 00:04:04,190 --> 00:04:06,080 is a number as well. 53 00:04:06,080 --> 00:04:11,720 If another class or just any other object inside of application has a location that is the latitude 54 00:04:11,780 --> 00:04:17,300 and longitude they can be an argument to add marker to make sure that's actually the case. 55 00:04:17,300 --> 00:04:20,090 Last thing to do is go back down to ad marker. 56 00:04:20,090 --> 00:04:21,860 We're going to change the type on here. 57 00:04:21,890 --> 00:04:24,690 We're going to say it to be an argument to add marker. 58 00:04:24,710 --> 00:04:28,490 You have to satisfy the map table interface that we just created. 59 00:04:28,490 --> 00:04:31,540 Like so OK. 60 00:04:31,590 --> 00:04:32,190 So that's it. 61 00:04:32,190 --> 00:04:33,560 That's the idea. 62 00:04:33,570 --> 00:04:41,510 So now we have an ad a marker function that can take any argument so long as it satisfies interface. 63 00:04:41,520 --> 00:04:48,000 So now if we start to add in like a class for park or car lots or a grocery store or dentist or whatever 64 00:04:48,000 --> 00:04:55,730 it is hospital as long as they satisfy this interface right here they can be an argument to add marker. 65 00:04:55,750 --> 00:05:00,230 One thing I wanna throw out there really quickly because we didn't super closely discuss this when we're 66 00:05:00,250 --> 00:05:01,300 talking about interfaces. 67 00:05:01,300 --> 00:05:05,550 Is that a single value inside of typescript can have multiple different types. 68 00:05:06,190 --> 00:05:11,650 So even though we're talking about having like users right here in company an instance of a user has 69 00:05:11,650 --> 00:05:16,930 type user but it can also fulfill the interface mapping tool and if it fulfills that interface then 70 00:05:16,930 --> 00:05:19,470 user can also be of type manageable. 71 00:05:19,570 --> 00:05:23,890 So single value can technically have like multiple different types just want to clarify that really 72 00:05:23,890 --> 00:05:25,330 quickly. 73 00:05:25,330 --> 00:05:25,530 All right. 74 00:05:25,570 --> 00:05:27,040 Let's take another quick pause right here. 75 00:05:27,050 --> 00:05:31,270 We're gonna come back the next video and fix up the rest of our code to make sure that we can pass in 76 00:05:31,480 --> 00:05:34,200 a user in a company to this method. 77 00:05:34,220 --> 00:05:35,740 I'll see you in just a minute.