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