Errors 10 exercises
solution

Adding Missing Types Declaration Files

The issue is that the diff package does not include any TypeScript files, specifically a .d.ts file that contains types.

If we look at the JavaScript files for diff inside of node_modules, we can see that there are no types.

As the error message suggests, the fix for this error is to insta

Loading solution

Transcript

00:00 We're inside the solution file and there is no more error here. And in fact, whereas before we were getting just when we tried to use diff, we would say diff.whatever and we would try to access stuff, but it wasn't available. Now we can actually use diff.

00:16 So we can say diff.diff for instance, new diff.diff I think is the way to do it. And now we actually get autocomplete and we've got all of our stuff available. Brilliant. What has changed? Well, I have installed a package in should be in dev dependencies, actually, which is at types forward slash diff.

00:36 And I've installed it as I think the latest version. What how has that made a difference then? Well, if we look at the original error here, then what it was saying to us is it was saying try npm i save dev types diff if it exists.

00:54 And what's happening here is that basically diff itself, if we look inside the node modules for the package here, we can see that if we look at like dist, I think, or lib, I'm not sure which one it actually comes from. But you notice there are no TypeScript files in here and specifically no .d.ts

01:14 files. .d.ts files are a way of TypeScript basically describing JavaScript files. So if we look at some of these JavaScript files that are in here, it's basically there's no types on here and there's no way for TypeScript to figure out what types these are supposed to be. And so the original error we were getting

01:32 here is we could not find a declaration file for module diff. So for whatever reason, the owners of diff, the maintainers of it, don't want to add declaration files to the project themselves. So that we need a kind of community solution to be able to actually add those ourselves.

01:52 And so there is a repo called definitely typed, which has basically is a community effort has been run for many, many years. And essentially what it does is it owns the at types namespace here on NPM and it lets community members basically post

02:12 type declarations for projects that don't have them themselves. And so if we look at the solution inside here, I've added at types diff. This is maintained by a bunch of lovely people. And inside my node modules, we now have an at types directory and it has diff inside it. And it has an index.d.ts file.

02:31 This index.d.ts file basically describes what the diff module is. So export as namespace diff, exports a bunch of interfaces. Hunk. Did I just see hunk come in? Yeah, there we go. Hunk. It's one for me. Lovely. And we have this is a long old file

02:49 and gives really, really nice comments like describing all of the code in there. This isn't linked to the repository at all. Like this is like committed to separately, has a separate version on NPM and everything like that. But it's maintained in concert with diff. So I have diff and then I have types diff.

03:08 And now when I go to use the code, it's basically got its declaration file. And if I command click on it, then it's actually going to go to the declaration file that I just saw there inside types diff node modules. There we go. This is basically a way that this is what this area is saying.

03:26 A declaration file is a.d.ts file that describes some JavaScript. And by giving us the error here, it's basically saying you need to add this to diff in order for TypeScript to understand how to use it. And this is pretty amazing that this just works right out of the box without me having to configure anything else here. There's nothing else in here.

03:46 It's just the package.json, which has just the types diff. We have the node modules that are in there. I haven't added anything to my TS config in order to make this work. It just works right out of the box. And this is essentially how you type many different projects like React as well. Doesn't have its own types and often legacy projects will also do this, too.

04:04 So definitely typed is pretty amazing for the TypeScript ecosystem. And if we look back at the original error, this is exactly what it's trying to say. Even gives you a command that you can run in here to add the declaration file. Super cool.