1 00:00:00,780 --> 00:00:04,939 In the last video, we installed a Facher module, but we very quickly saw a warning around it. 2 00:00:05,460 --> 00:00:10,320 So if I hover over this right here, I see something that says could not find declaration file for module 3 00:00:10,320 --> 00:00:10,760 FACHER. 4 00:00:10,950 --> 00:00:12,480 So let's talk about what that's about. 5 00:00:13,320 --> 00:00:14,640 First off, a quick diagram. 6 00:00:15,390 --> 00:00:15,690 All right. 7 00:00:15,690 --> 00:00:19,770 So just to make sure things are really clear, whenever you and I are writing typescript code, we are 8 00:00:19,770 --> 00:00:26,520 free to make use of JavaScript or more precisely, JavaScript libraries as much as we want to so we 9 00:00:26,520 --> 00:00:31,800 can install common JavaScript libraries into any type of project using NPM. 10 00:00:32,220 --> 00:00:37,680 Or we could even reference JavaScript files that you and I write ourselves inside of our project from 11 00:00:37,680 --> 00:00:38,550 typescript code. 12 00:00:39,310 --> 00:00:41,280 But there's one little caveat here. 13 00:00:41,820 --> 00:00:47,220 Remember, TypeScript wants to check your code and it checks your code by the use of type's. 14 00:00:48,040 --> 00:00:52,360 TypeScript wants to know all the different functions that you have, what different type of arguments 15 00:00:52,360 --> 00:00:57,190 they take and what type of value they return, and in general, it wants to know all the different types 16 00:00:57,190 --> 00:00:59,080 of data that are flowing around your application. 17 00:00:59,590 --> 00:01:03,700 If TypeScript doesn't have this information, then it cannot completely check your code. 18 00:01:04,569 --> 00:01:09,430 So when we start to think about using JavaScript code inside of our project, naturally all JavaScript 19 00:01:09,430 --> 00:01:14,530 code we write or make use of is not going to have any type information attached to it in. 20 00:01:14,530 --> 00:01:19,300 TypeScript can't really automatically figure out what different types of values are floating around 21 00:01:19,300 --> 00:01:20,230 JavaScript code. 22 00:01:20,920 --> 00:01:26,140 So to fix this problem, TypeScript, has the idea of type definition files. 23 00:01:26,800 --> 00:01:31,300 You can think of a type definition file as kind of an adaptor between typescript code that you and I 24 00:01:31,300 --> 00:01:36,880 write in JavaScript libraries that we try to work with in type definition file is going to tell the 25 00:01:36,880 --> 00:01:41,950 typescript compiler all the different functions that are available inside this JavaScript library, 26 00:01:42,310 --> 00:01:46,480 what type of argument they take and what type of value those functions return. 27 00:01:47,140 --> 00:01:51,850 So once again, you can think of these type definition files as like an adapter layer of sorts. 28 00:01:53,160 --> 00:01:57,700 Sometimes type definition files will be installed automatically when you install a JavaScript library. 29 00:01:58,050 --> 00:02:02,370 So, for example, if you recall that Axios project we worked on at the very start of this course, 30 00:02:02,670 --> 00:02:06,300 we never did anything related to typedef definition files. 31 00:02:06,960 --> 00:02:11,740 That's because Axios, by default, includes a type definition file for us. 32 00:02:12,360 --> 00:02:17,610 However, right now we are making use of the FAKHER module, which does not include a type definition 33 00:02:17,610 --> 00:02:18,000 file. 34 00:02:18,870 --> 00:02:24,900 So we have to install a type definition file manually, if it is not included for us, it might sound 35 00:02:24,900 --> 00:02:30,330 really challenging to know when a typed definition is file is included or not included, but basically 36 00:02:30,330 --> 00:02:31,560 it's going to be really straightforward. 37 00:02:31,710 --> 00:02:36,270 If you ever try to make use of a module and you see that warning we just saw right here, that means 38 00:02:36,270 --> 00:02:38,430 you need to install that type declaration file. 39 00:02:40,250 --> 00:02:44,080 Once we understand that we need to install that file, it's a really simple process. 40 00:02:44,600 --> 00:02:45,980 So here's what's going to happen. 41 00:02:46,580 --> 00:02:50,390 All these type definition files are already publicly available for you. 42 00:02:50,700 --> 00:02:54,860 I shouldn't say all of them, but the vast majority for popular libraries have already been created. 43 00:02:55,430 --> 00:03:00,620 So there is already a type definition file out there that has been created by some random person to 44 00:03:00,620 --> 00:03:04,460 work with the FAKHER Library to install that type definition file. 45 00:03:04,940 --> 00:03:08,330 We're going to reach into a project called Definitely Typed. 46 00:03:08,810 --> 00:03:13,310 That's the name of the project that includes all these pre created or pre generated type definition 47 00:03:13,310 --> 00:03:18,320 files in general to get any of these type definition files from definitely PYT typed. 48 00:03:18,750 --> 00:03:23,660 We're always going to install an NPRM module that generally is going to be named something like that 49 00:03:23,660 --> 00:03:27,540 types and then the name of the library that we're trying to make use of. 50 00:03:28,100 --> 00:03:30,860 So for us, it would be at Types Faker. 51 00:03:31,700 --> 00:03:37,220 As a quick example, let's try looking up that module on NPM right now, so back inside my browser over 52 00:03:37,220 --> 00:03:44,480 here at NPM, James Dotcom, I can do a search for at Type's Baker and I'll see the typescript definition 53 00:03:44,480 --> 00:03:45,950 file appear for that library. 54 00:03:47,940 --> 00:03:49,200 So we can scroll down a little bit. 55 00:03:50,250 --> 00:03:55,590 And you'll see some details inside of here where it says very clearly that this file or this project 56 00:03:55,590 --> 00:03:58,690 has been generated from the definitely typed project. 57 00:03:59,070 --> 00:04:00,230 So, again, definitely typed. 58 00:04:00,240 --> 00:04:05,040 Any time you see that term, they're talking about type definition files for JavaScript libraries. 59 00:04:06,340 --> 00:04:10,000 All right, so once again, to fix up this whole big issue, all we have to do is install that type 60 00:04:10,000 --> 00:04:11,470 definition file for FACHER. 61 00:04:12,230 --> 00:04:14,290 So I'm going to flip back over to my terminal one more time. 62 00:04:14,920 --> 00:04:18,790 I'm going to do an NPM install at Type's Slash Facher. 63 00:04:20,829 --> 00:04:25,240 These files are always extremely small because there's just a little bit of code to describe the different 64 00:04:25,240 --> 00:04:30,610 types inside that library, so once it is installed, we can then start back up parcel once more with 65 00:04:30,610 --> 00:04:33,190 Pozole Index HTML. 66 00:04:34,750 --> 00:04:39,280 All right, once that's all done, I can flip back over to my editor and you'll now notice that that 67 00:04:39,280 --> 00:04:40,400 little warning is gone. 68 00:04:40,660 --> 00:04:43,840 I still see a warning here saying that fakers declared butts values never read. 69 00:04:44,030 --> 00:04:44,830 That's totally fine. 70 00:04:45,430 --> 00:04:50,380 More importantly, we got rid of that other error or that other warning around a missing type definition 71 00:04:50,380 --> 00:04:50,740 file. 72 00:04:51,760 --> 00:04:56,170 OK, so that's it for type definition files again, remember the vast majority of time that you are 73 00:04:56,170 --> 00:05:01,420 using a JavaScript project inside of your typescript code, you might have to install that type definition 74 00:05:01,420 --> 00:05:01,810 file. 75 00:05:02,410 --> 00:05:05,740 Some JavaScript libraries include that type definition file by default. 76 00:05:05,960 --> 00:05:10,810 Other ones, like less popular libraries in general, are not going to include it automatically. 77 00:05:10,810 --> 00:05:12,730 So you will have to install it separately. 78 00:05:13,660 --> 00:05:16,480 All right, so let's take a pause right here and we'll continue in the next video.