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