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