1 00:00:01,330 --> 00:00:04,780 In the last video, he wrote out a little bit of code, but it's got one little issue. 2 00:00:05,080 --> 00:00:07,780 We've got a really long type annotation on this function right here. 3 00:00:08,260 --> 00:00:13,150 I think you can easily imagine that if we had several other functions inside this file that all expected 4 00:00:13,150 --> 00:00:17,890 to be called with old Civic, we would have to repeat this type annotation right here several times 5 00:00:17,890 --> 00:00:20,200 over and it would be a lot of duplicate code. 6 00:00:20,920 --> 00:00:24,070 So to fix this, we're going to create an interface inside this file. 7 00:00:24,790 --> 00:00:29,050 I'm going to go up to the very top and I'm going to define an interface by writing out the interface 8 00:00:29,050 --> 00:00:32,830 keyword and then a name for the new type that I am creating. 9 00:00:33,350 --> 00:00:38,950 Remember, any time we create an interface, we are creating a new type, a type in the same way that 10 00:00:38,950 --> 00:00:41,890 a number is a type or a string or boolean or so on. 11 00:00:42,830 --> 00:00:45,220 So I cannot create an interface called vehicle. 12 00:00:46,820 --> 00:00:51,020 Whenever we create an interface, we're always going to use a capital letter on the leading edge of 13 00:00:51,020 --> 00:00:51,440 the word. 14 00:00:52,320 --> 00:00:56,730 You'll also know some using kind of a generic term right here, so I'm not creating an interface called 15 00:00:56,730 --> 00:01:01,280 like Civic or an interface called old civic or new civic or anything like that. 16 00:01:01,680 --> 00:01:07,650 Instead, I'm creating a very generic name right here to describe what different properties a vehicle 17 00:01:07,650 --> 00:01:08,550 might have. 18 00:01:09,600 --> 00:01:13,560 So then inside these curly braces, I'm going to list out the different property names that I expect 19 00:01:13,560 --> 00:01:16,740 an object that is a vehicle to have and they're different types. 20 00:01:17,520 --> 00:01:22,170 So in order to be a vehicle, you must have a name property that is a string. 21 00:01:22,920 --> 00:01:28,860 You must have a year property that is a number, and you must have a broken property that is a boolean 22 00:01:28,860 --> 00:01:29,430 like so. 23 00:01:30,840 --> 00:01:35,610 So once again, we have now created a new type inside of our application called vehicle, and in order 24 00:01:35,610 --> 00:01:40,290 to be a vehicle, you have to have these properties and they must have these different types. 25 00:01:41,350 --> 00:01:45,970 So we can now think of vehicle right here as being kind of like a variable of sorts that refers to a 26 00:01:45,970 --> 00:01:52,000 type, so rather than riding out this really long form type annotation right here, I can delete that 27 00:01:52,000 --> 00:01:57,490 full annotation and replace it with just a vehicle like so. 28 00:01:58,980 --> 00:02:03,760 So what are we saying here by putting this code in, we are now saying that in order to call it a print 29 00:02:03,780 --> 00:02:10,620 vehicle function, you must pass in an object that meets the specifications provided by the vehicle 30 00:02:10,620 --> 00:02:11,220 interface. 31 00:02:11,890 --> 00:02:16,950 In other words, to call this function, you must provide an object that has a name that is a string 32 00:02:17,400 --> 00:02:19,380 a year that is a number and broken. 33 00:02:19,380 --> 00:02:20,100 That is a boolean. 34 00:02:21,120 --> 00:02:24,580 The old civic object satisfies each of those requirements. 35 00:02:24,600 --> 00:02:27,790 It has a name that's a string year that's a number and broken, that is a boolean. 36 00:02:28,260 --> 00:02:32,230 So we are allowed to pass an old civic to print vehicle. 37 00:02:32,790 --> 00:02:36,690 You'll notice that down here where we actually call a print vehicle, there is no air and no warning 38 00:02:36,690 --> 00:02:37,860 or anything like that. 39 00:02:39,120 --> 00:02:44,040 So as soon as we added in the statement, TypeScript did a little bit of checking for us, a little 40 00:02:44,040 --> 00:02:45,810 process went on behind the scenes. 41 00:02:46,560 --> 00:02:51,900 TypeScript took a look at the argument we provided and it said, OK, we need to look at that old civic 42 00:02:51,900 --> 00:02:55,230 object and make sure that it satisfies this interface. 43 00:02:55,230 --> 00:02:59,190 We need to make sure that old civic has all the appropriate property names and types. 44 00:03:00,000 --> 00:03:04,980 And so behind the scenes, typescript, loop through all these different properties and made sure that 45 00:03:04,980 --> 00:03:09,420 old Civic had each of those different property names and the appropriate value for each one. 46 00:03:10,490 --> 00:03:16,130 If I change any of these types right here and assign a different type, let's let's say instead of broken, 47 00:03:16,280 --> 00:03:18,560 I'm going to put in like just a one like. 48 00:03:18,560 --> 00:03:21,860 So as soon as I do that, you'll notice we get an error message down here. 49 00:03:22,820 --> 00:03:29,090 So TypeScript is telling us that in order to pass an old civic, we have to have a broken property that 50 00:03:29,090 --> 00:03:33,800 is a boolean, but we have a broken property that is a number, and that's why we're seeing an error. 51 00:03:34,520 --> 00:03:38,300 So if I change that one back to true, everything works again. 52 00:03:39,140 --> 00:03:44,690 Likewise, if I misspell any of the property names inside the subject, like, let's say, is broken 53 00:03:44,690 --> 00:03:45,160 instead. 54 00:03:45,890 --> 00:03:49,120 Now our object can no longer be considered to be a vehicle. 55 00:03:49,610 --> 00:03:50,870 Remember to be a vehicle. 56 00:03:50,900 --> 00:03:52,730 We have to have a broken property. 57 00:03:53,120 --> 00:03:57,860 But I provide a property that is is broken because those property names are different. 58 00:03:58,040 --> 00:04:03,140 TypeScript will not allow me to pass in old Civic into the print vehicle function. 59 00:04:04,130 --> 00:04:08,390 And if I hover over that air right there, it's going to tell me very plainly down towards the bottom 60 00:04:08,390 --> 00:04:15,230 of this air right here, it says Property broken is not present inside the object I provided, but it 61 00:04:15,230 --> 00:04:17,060 is required to be a vehicle. 62 00:04:18,000 --> 00:04:23,010 So once again, if I change is broken back over to broken, everything works again. 63 00:04:24,220 --> 00:04:30,010 OK, so this right here is some of the like very basic interaction or definition of what an interface 64 00:04:30,010 --> 00:04:30,370 is. 65 00:04:30,900 --> 00:04:31,950 So let's take a quick pause right here. 66 00:04:31,960 --> 00:04:35,830 We're going to come back to the next video and start to expand on this example just a little bit more.