1 00:00:00,780 --> 00:00:04,680 In this video, we're going to start writing out some code to get a better understanding of how interfaces 2 00:00:04,680 --> 00:00:09,300 work, you'll notice them back inside my code editor and inside of my project directory, I'm going 3 00:00:09,300 --> 00:00:12,120 to make a new file called Interfaces Dots. 4 00:00:13,340 --> 00:00:16,790 All right, so inside of here, we're not going to write out an interface just yet. 5 00:00:17,030 --> 00:00:20,900 Instead, I first want to define an object that represents a car. 6 00:00:21,470 --> 00:00:25,670 We're then going to write a function that kind of operates on that object and we'll start to introduce 7 00:00:25,670 --> 00:00:26,410 interfaces. 8 00:00:26,960 --> 00:00:30,380 So to get started, I'm going to make a variable called Old Civic. 9 00:00:33,580 --> 00:00:40,210 Just a civic is a type of car or like a vehicle of sorts, so it's a Honda Civic by saying old Civic, 10 00:00:40,210 --> 00:00:44,410 I just mean to indicate that we are going to make an object that represents a civic that was made many 11 00:00:44,410 --> 00:00:44,980 years ago. 12 00:00:45,800 --> 00:00:51,010 So inside this object, I'm going to add a couple of different properties to describe exactly some things 13 00:00:51,010 --> 00:00:52,020 about the Civic. 14 00:00:52,510 --> 00:00:54,610 So I'm going to give it a model property, actually. 15 00:00:54,640 --> 00:00:55,840 Well, let's give it a name instead. 16 00:00:55,840 --> 00:00:57,080 That's just a little bit more clear. 17 00:00:57,700 --> 00:01:04,120 So this car is going to have a name of civic aisle, then give it a year that it was built of 2000 and 18 00:01:04,120 --> 00:01:08,080 then a broken property to describe whether or not this vehicle still runs. 19 00:01:08,660 --> 00:01:10,180 I'll say it's broken. 20 00:01:10,720 --> 00:01:11,080 True. 21 00:01:12,770 --> 00:01:16,610 Now that we've put that object together, I want to try creating a function that's going to take in 22 00:01:16,610 --> 00:01:19,550 this object and just print out some different properties about it. 23 00:01:20,220 --> 00:01:23,480 So I'm going to define a function called print vehicle. 24 00:01:28,490 --> 00:01:34,040 Then I'm going to add in a single argument, so we want to call this function with a car, I'm going 25 00:01:34,040 --> 00:01:38,470 to refer to this argument has how about just like a vehicle that makes sense? 26 00:01:39,050 --> 00:01:43,940 And then remember, we need to add in a type annotation to describe exactly what properties or what 27 00:01:43,940 --> 00:01:46,040 type vehicle is right now. 28 00:01:46,040 --> 00:01:51,050 If I hover over a vehicle, it says that it is of type any remember, we want to avoid any types inside 29 00:01:51,050 --> 00:01:51,770 of application. 30 00:01:52,620 --> 00:01:57,090 And we saw how to add in a annotation for an object inside of a function just a moment ago. 31 00:01:57,210 --> 00:02:01,800 So we're going to put in the set of curly braces or something, a colon right there, and then a set 32 00:02:01,800 --> 00:02:02,640 of curly braces. 33 00:02:03,210 --> 00:02:07,050 And then we'll list out all the different properties that we expect this argument to have. 34 00:02:07,410 --> 00:02:08,699 And they're different types. 35 00:02:09,460 --> 00:02:12,870 So I expect a vehicle to have a name that is a string. 36 00:02:13,810 --> 00:02:18,940 I remember inside this type invitation to separate different properties will place a set of a semicolon 37 00:02:18,940 --> 00:02:19,420 like so. 38 00:02:20,420 --> 00:02:23,990 I didn't expect a vehicle to have a year that is a no. 39 00:02:25,130 --> 00:02:27,230 I'm going to zoom out for a second so you can see this whole line. 40 00:02:28,870 --> 00:02:32,890 And I expect a vehicle to have a broken flag that is going to be a boolean. 41 00:02:34,150 --> 00:02:37,930 Finally, I'm going to add in a type invitation to the return of this function, so right after the 42 00:02:37,930 --> 00:02:42,190 argument list, I'll put in a Colen, I don't expect this function to return anything. 43 00:02:42,190 --> 00:02:44,440 So I'm going to give it a type invitation, avoid void like. 44 00:02:44,440 --> 00:02:47,530 So remember, void means our function returns nothing. 45 00:02:49,750 --> 00:02:50,920 All right, I'm going to zoom back in. 46 00:02:52,660 --> 00:02:56,680 So now inside of here, we can do our actual implementation, so I'll just do a couple of console logs 47 00:02:56,680 --> 00:03:01,270 using properties from the vehicle, I'm going to use an E 2015 template string, so I'm going to use 48 00:03:01,270 --> 00:03:02,140 some tactics here. 49 00:03:02,750 --> 00:03:08,020 I'll do some things like let's say, how about name and I'll do vehicle name. 50 00:03:09,300 --> 00:03:13,380 I'll do another little statement here, I'll do something like yea. 51 00:03:14,430 --> 00:03:17,010 The Hickel year. 52 00:03:18,620 --> 00:03:20,560 And then one more for the broken flag as well. 53 00:03:22,470 --> 00:03:23,190 So broken. 54 00:03:24,430 --> 00:03:28,360 No typo there and there we go, vehicle broken. 55 00:03:30,140 --> 00:03:30,430 Cool. 56 00:03:31,100 --> 00:03:37,970 So now we should be able to call print vehicle and pass in old civic old civic structure is a name that 57 00:03:37,970 --> 00:03:40,550 is string year, that is a number and broken. 58 00:03:40,550 --> 00:03:41,260 That is a boolean. 59 00:03:41,750 --> 00:03:45,140 And so that meets the type annotation we just put on that argument right there. 60 00:03:45,140 --> 00:03:47,900 So we should be able to pass an old civic and not have an issue. 61 00:03:48,630 --> 00:03:55,190 So I'm going to take a print vehicle and pass in old civic and everything looks good to me. 62 00:03:55,220 --> 00:03:55,760 Perfect. 63 00:03:56,600 --> 00:03:57,020 All right. 64 00:03:57,050 --> 00:04:00,210 Now I say perfect, but maybe not quite perfect. 65 00:04:00,230 --> 00:04:04,220 There's one little issue inside this file right now, so I bet you can guess what it is. 66 00:04:04,760 --> 00:04:07,550 This type of notation right here is really long. 67 00:04:07,850 --> 00:04:08,840 It's kind of hard to read. 68 00:04:09,170 --> 00:04:13,940 And if we had any more properties on this object, the type of notation would become even harder to 69 00:04:13,940 --> 00:04:14,270 read. 70 00:04:14,990 --> 00:04:20,180 In addition, if we added in more functions that expected to be we expected to call with old Civic, 71 00:04:20,480 --> 00:04:25,160 we would then be duplicating this type annotation for each of those different functions. 72 00:04:26,170 --> 00:04:30,190 And so we would have this really long annotation right here, duplicated several times throughout this 73 00:04:30,190 --> 00:04:30,580 file. 74 00:04:31,030 --> 00:04:33,790 So as you might imagine, yeah, that's probably not the best. 75 00:04:34,500 --> 00:04:35,820 So let's take a quick pause right here. 76 00:04:35,860 --> 00:04:40,270 We're going to come back to the next video and figure out how we can improve this file by using an interface.