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