Install Type Definitions from DefinitelyTyped
Despite its popularity, the diff
library does not ship with its own TypeScript type definitions, leading TypeScript to give us an error.
However, as the error message showed us, we can install type definitions for the 'diff' library by installing @types/diff
as a dev dependency.
Here's the in
Transcript
00:00 Okay, the first thing I want to do to solve this exercise is actually CD down to the directory inside my terminal So I'm going inside source 065 times you don't control 175 definitely type dot solution and I'm in here and so I've now got if I LS I've got access to all of these files
00:16 Now the thing that we're going to need to do is actually install a package to fix this We can see that we're getting an error here saying try npm I save dev types diff if it exists now This is interesting problem because what's happening here is the external library that we're using called diff is very popular
00:36 But it doesn't itself ship any type definitions with it If we come on click and look in there, then if we go take a look in node modules, or it's going to be Where is it inside not you inside here inside node modules? We have our diff there and if we look at the package dot JSON inside here
00:55 It's telling us that the main of the file or the main entry point is index dot JS here So inside lib, so if we look at lib index dot JS You notice there's no accompanying declaration files for this and typescripts can't find any now
01:10 This means that we're going to have to grab those from somewhere because we really need like this is a very very common problem Especially when typescript was first starting out was there was tons of libraries out there used in JS that didn't have
01:24 declaration files that were there to describe what they did to typescript and so what typescript is saying if we go back to the This error here is it's saying it can't find a declaration file and it doesn't really know how to interpret this code So this npm I save dev types diff. Let's see. Let's just try that out. So we need to use pnpm instead
01:45 So we'll say pnpm I types diff like that and we're going to save it as a dev Dependency here now what this is doing this sort of at types Syntax is it's going to an actual repo out in the world called definitely typed which I think might be one of the biggest github repos certainly on github and
02:05 What it's doing is it's pulling down the types for a certain library. So this now installs itself Inside types diff here. So we're inside node modules types diff and there we have an index dot D dot TS And what this is doing is it's basically
02:23 like adds a dot D dot TS file which describes what that diff library does and Typescript is smart enough to know that if there's something in this at types folder here Then it can look at that and see okay now I've found the declaration files for this
02:39 So if we look at this long output here, we can see that there's at types diff node modules types diff index So it's looking for that so this is amazing because it means that we can essentially use JavaScript libraries which don't have their own types in and the community which on definitely typed is basically just run by a massive community of people is
02:59 They are contributing the types for that And so sometimes you will have libraries that you're trying to use that just don't have types And so you can look on definitely type to see if there is an equivalent for that library That has been contributed to the by the community and of course you can go and look at those type definitions yourself make PRS for them
03:17 It's a wonderful very active community And so now diff is fully typed and we get our diff chars function strongly type So we've got old string new string here Whereas before we could just pass in like 12 and it wouldn't give us any errors here and now diff
03:32 We've actually got proper types called diff dot change array here beautiful stuff. So that is definitely typed That's how to handle sometimes when JavaScript libraries don't ship their own types. That's how to give them the types