1 00:00:00,800 --> 00:00:04,610 All right, my friends, we've now finished up our first application in this video, I want to do a 2 00:00:04,610 --> 00:00:07,400 quick review of the very important concepts we learned. 3 00:00:07,840 --> 00:00:13,100 So the first important thing that we covered was that we wanted to restrict the amount of APIs surface 4 00:00:13,100 --> 00:00:15,650 area exposed inside of index sites. 5 00:00:16,340 --> 00:00:21,620 So in other words, if another engineer opened up our project and only had access to this file right 6 00:00:21,620 --> 00:00:25,100 here, we wanted to limit the number of things that they could do. 7 00:00:25,520 --> 00:00:30,440 They could only do things that you and I had specifically allowed inside of our application. 8 00:00:31,190 --> 00:00:37,010 So, for example, another engineer could only create an instance of a user and read its name, property 9 00:00:37,010 --> 00:00:37,840 and its location. 10 00:00:38,660 --> 00:00:44,120 Another engineer could only create a company and then reference its company name, catchphrase and location. 11 00:00:44,990 --> 00:00:49,790 And with a custom map, another engineer could only create an instance of a custom map and then call 12 00:00:49,790 --> 00:00:53,810 that ad marker method in as far as our code is concerned. 13 00:00:54,080 --> 00:00:57,070 That's the only thing that other engineers can do inside of here. 14 00:00:57,740 --> 00:01:03,200 The most important aspect of this was that we wanted to restrict access to that Google map that we created 15 00:01:03,500 --> 00:01:07,190 because remember, the Google map had a ton of different properties associated with it. 16 00:01:07,820 --> 00:01:12,620 So to make sure that other engineers could not mess with this thing, we added on that private modifier. 17 00:01:13,220 --> 00:01:18,680 The private modifier means that we can only reference this property from methods inside of the custom 18 00:01:18,680 --> 00:01:19,040 map. 19 00:01:20,090 --> 00:01:26,600 So, for example, back inside of inducts, if we tried to refer to a custom map Google map, we got 20 00:01:26,600 --> 00:01:31,850 that error message that said this is a private property and you cannot access it unless you are inside 21 00:01:31,850 --> 00:01:32,960 of the class custom map. 22 00:01:34,120 --> 00:01:39,010 Now, I know 100 percent, I know what you're thinking, but in other engineers can just open up this 23 00:01:39,010 --> 00:01:44,200 file and start calling this or accessing this property directly from inside this class. 24 00:01:44,590 --> 00:01:45,730 Yes, I agree with you. 25 00:01:45,820 --> 00:01:47,680 Another engineer could open up this file. 26 00:01:48,220 --> 00:01:54,580 But the idea here was simply that if we viewed custom map as being like a black box or kind of like 27 00:01:54,580 --> 00:01:58,950 a mystery thing of sorts, we limited the damage that other engineers can do. 28 00:01:59,380 --> 00:02:05,560 So we just exposed the bare minimum amount of functionality to allow our application to work and nothing 29 00:02:05,560 --> 00:02:05,960 more. 30 00:02:06,790 --> 00:02:09,370 So another engineer absolutely can open up that file. 31 00:02:09,550 --> 00:02:14,260 But if you just kind of view this variable right here by itself, there's only two things we can do 32 00:02:14,260 --> 00:02:16,500 with it to create an instance and add a marker. 33 00:02:16,510 --> 00:02:16,990 That's it. 34 00:02:17,000 --> 00:02:17,710 Nothing else. 35 00:02:19,810 --> 00:02:26,020 The next big thing we spoke about was our interface inside of custom map, so we ran into many issues 36 00:02:26,020 --> 00:02:27,460 around this ad marker function. 37 00:02:28,120 --> 00:02:33,460 We initially saw that we had two different ad marker functions, one for business or one for companies 38 00:02:33,460 --> 00:02:34,380 and one for users. 39 00:02:34,780 --> 00:02:38,740 And when we had that duplicate definition, well, we had a lot of duplicate code. 40 00:02:39,280 --> 00:02:44,830 So as an initial approach, we tried to say that ad marker could take many different types. 41 00:02:45,410 --> 00:02:49,750 So we had ad marker and we said that you could pass in a user or a company. 42 00:02:49,750 --> 00:02:54,070 And then if we had additional types inside of application in the future, you could pass those in as 43 00:02:54,070 --> 00:02:54,430 well. 44 00:02:54,930 --> 00:03:00,280 And so the bad thing about this approach is that it set up a dependency between custom map and all the 45 00:03:00,280 --> 00:03:02,830 different things that we would want to map inside of our application. 46 00:03:03,310 --> 00:03:08,080 So as soon as we started to add in more things that could be represented on the map as a marker, well, 47 00:03:08,110 --> 00:03:13,270 we had to go back and update custom map, which would have been a very easy time for us to accidentally 48 00:03:13,270 --> 00:03:14,970 introduce bugs into our application. 49 00:03:15,670 --> 00:03:18,880 So to fix this problem, we inverted the dependency here. 50 00:03:19,240 --> 00:03:25,510 We said instead of custom map trying to accommodate all these different classes, we instead say, hey, 51 00:03:25,510 --> 00:03:28,530 other classes you have to accommodate custom map. 52 00:03:29,080 --> 00:03:34,630 So inside of custom map at the very top, we put some instructions on how another class or instance 53 00:03:34,630 --> 00:03:37,900 of the class could be a argument to add marker. 54 00:03:38,470 --> 00:03:44,050 We did that by defining an interface, so that was equivalent to custom map kind of standing up for 55 00:03:44,050 --> 00:03:44,560 itself. 56 00:03:44,770 --> 00:03:50,050 Custom map got up on a podium and it said to all the other classes inside of application, hey, other 57 00:03:50,050 --> 00:03:55,440 classes, if you want to be an argument to add marker, here's what you have to do. 58 00:03:56,020 --> 00:03:59,830 You have to define a location property that has the latitude as a number longitude. 59 00:03:59,830 --> 00:04:05,140 That's a number marker content that returns a string and color that is a string as well. 60 00:04:06,660 --> 00:04:12,810 Remember that we did not specifically have to update those classes until TypeScript, hey, I want my 61 00:04:12,810 --> 00:04:15,360 user to be an instance of matchable. 62 00:04:15,930 --> 00:04:18,870 We added this on only way later inside the application. 63 00:04:19,380 --> 00:04:25,170 So we did not have to specifically say, hey, typescript, we want user to be an argument to add marker 64 00:04:25,380 --> 00:04:26,040 instead. 65 00:04:26,040 --> 00:04:31,320 As long as we had the correct properties, typescript did the appropriate checking for us invisibly 66 00:04:31,320 --> 00:04:32,220 behind the scenes. 67 00:04:32,820 --> 00:04:38,340 As soon as we tried to pass in user or company to add marker, TypeScript automatically took a look 68 00:04:38,340 --> 00:04:41,970 at user and made sure it had the correct properties as long as it did. 69 00:04:42,180 --> 00:04:43,170 Awesome thumbs up. 70 00:04:43,380 --> 00:04:44,960 You can be an argument to add marker. 71 00:04:45,630 --> 00:04:52,950 So again, the whole idea here was that we wanted our custom map to tell other classes what they had 72 00:04:52,950 --> 00:04:54,750 to do to be an argument. 73 00:04:55,790 --> 00:05:01,040 Now, the pattern you see right here is going to be a pattern that we repeat so many times again and 74 00:05:01,040 --> 00:05:06,170 again and again and again, remember, I've told you many times that or at least once I should say that 75 00:05:06,170 --> 00:05:10,880 in typescript, the big thing we want to learn and like the big killer feature of TypeScript, is the 76 00:05:10,880 --> 00:05:13,760 interplay between classes and interfaces. 77 00:05:14,010 --> 00:05:15,950 And that's exactly what you are seeing right here. 78 00:05:15,950 --> 00:05:16,660 This right here. 79 00:05:16,670 --> 00:05:21,410 This is the killer feature of TypeScript, and this is how we're going to write some code. 80 00:05:22,070 --> 00:05:26,870 So just about every project that you and I work on is going to have an identical structure. 81 00:05:27,380 --> 00:05:32,390 Every typescript file we work on is going to be something like this at the very top. 82 00:05:32,390 --> 00:05:34,910 We're going to have a number of interface definitions. 83 00:05:35,250 --> 00:05:37,430 Maybe it's one, two, three, four, however many. 84 00:05:37,790 --> 00:05:43,160 And those definitions are going to describe what you have to do to work with the class. 85 00:05:44,310 --> 00:05:49,830 So our class definition will have a couple of methods, and if a given method has to receive some other 86 00:05:49,830 --> 00:05:55,530 object to work correctly, rather than specifying that other object type, we're going to instead specify 87 00:05:55,530 --> 00:05:56,490 an interface. 88 00:05:56,970 --> 00:06:02,580 So other objects inside of application can choose to implement that interface so they can work with 89 00:06:02,580 --> 00:06:03,660 this class definition. 90 00:06:04,290 --> 00:06:10,230 And that's how we're going to get this awesome amount of code we use and very low coupling between different 91 00:06:10,230 --> 00:06:11,850 classes inside of application. 92 00:06:13,110 --> 00:06:17,520 I can't say it enough, we're gonna see this pattern again and again, this is the whole point of this 93 00:06:17,520 --> 00:06:19,800 course is to help you understand this pattern. 94 00:06:20,280 --> 00:06:21,900 Well, a couple of things as well. 95 00:06:21,900 --> 00:06:23,330 But you understand. 96 00:06:23,790 --> 00:06:28,800 OK, one last big thing here, last we want to mention is that if we wanted to, we could help TypeScript 97 00:06:28,920 --> 00:06:29,930 give us help. 98 00:06:30,390 --> 00:06:34,590 So when we start working with this interface stuff, we want to make sure that we start to see errors 99 00:06:34,590 --> 00:06:35,760 in the correct location. 100 00:06:36,090 --> 00:06:41,670 So to help TypeScript show us errors in our interface, definitions in the correct spot, we can optionally 101 00:06:41,670 --> 00:06:44,150 choose to implement an interface. 102 00:06:44,160 --> 00:06:48,330 So instead of user teams, we imported the matchable interface. 103 00:06:48,660 --> 00:06:53,610 And we told TypeScript very directly in this case, hey, typescript, we want our class user or an 104 00:06:53,610 --> 00:06:58,290 instance of user to be compatible with the makeable interface. 105 00:06:58,980 --> 00:07:02,790 So to do so, we optionally add on implements makeable right here. 106 00:07:02,790 --> 00:07:09,150 And that tells TypeScript we are trying to make a user satisfied the matchable interface by adding that 107 00:07:09,150 --> 00:07:13,200 in typescript is going to take a look at our user definition and make sure that we are implementing 108 00:07:13,200 --> 00:07:16,500 the correct properties again, 100 percent optional. 109 00:07:16,830 --> 00:07:21,910 The only reason we do this is so that we can kind of help other engineers understand what we're doing 110 00:07:21,910 --> 00:07:22,910 at this class right here. 111 00:07:23,460 --> 00:07:27,000 So if another engineer saw the statement, they would understand, oh, OK, I get it. 112 00:07:27,010 --> 00:07:28,670 We want a user to be immoveable. 113 00:07:29,280 --> 00:07:33,210 The other reason we add this in is that TypeScript can take a look at the different properties here 114 00:07:33,330 --> 00:07:37,140 and help us make sure that we add in all the correct properties. 115 00:07:38,670 --> 00:07:44,460 OK, so that's it, that's the three big important things here, once again, inside of index states 116 00:07:44,460 --> 00:07:46,550 wanted to restrict API service area. 117 00:07:46,860 --> 00:07:53,040 Second off, we wanted to use interfaces to set up a type of dependency between the different classes 118 00:07:53,040 --> 00:07:54,000 inside of our application. 119 00:07:54,270 --> 00:07:59,280 And then finally, we can help TypeScript put errors in the correct location by using this implements 120 00:07:59,280 --> 00:08:00,540 clause on classes. 121 00:08:01,190 --> 00:08:03,390 So with all this in mind, let's take a pause right here. 122 00:08:03,810 --> 00:08:06,900 We're going to go to the next video and start working on our next application.