[00:00] In this exercise, we have a single import Insider application, import diff from diff. Inside here, it's basically saying, could not find a declaration file for module diff. Implicitly hasn't any type. Try something if it exists or add a new declaration file containing declare module diff.

[00:19] Now, this is annoying because we have a package.json inside here. This package.json has a dependency on diff, and we can see that inside Node modules, we have diff is there. It has all of its code. Why isn't it letting us use it in TypeScript? This is really, really annoying.

[00:37] So see if there's a way that you can solve this error, possibly by using the actual error itself to tell you how it might solve it. I'll see you on the other side to explain why this error is even occurring. Good luck.

This exercise also includes its own small directory.

Inside of the `index.ts` file, we have a single import:

```typescript
import Diff from "diff"; // red squiggly line under diff
```

There is an error under `diff` that reads:

```typescript
// hovering over diff shows:
Could not find a declaration file for module 'diff'. Implicitly has an 'any' type.
```

The `diff` package is listed in the `package.json` file, and we can see that it's present inside the `node_modules` folder. Why isn't TypeScript letting us use it?

## Challenge

Your challenge is to read the error message closely, then use the information to determine how to resolve it.

Learn to resolve an error when a TypeScript import is missing a declaration file.

[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.

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 install the types for the `diff` package:

```bash
npm i --save-dev @types/diff
```

The `@types/diff` package is maintained by a group of community members at the DefinitelyTyped GitHub. There are types for many popular JavaScript packages, including `diff`.

## Understanding the Declaration File

Once installed, you'll find a new `@types` directory inside your `node_modules`, which contains the `diff` directory and an `index.d.ts` file.

The `index.d.ts` file describes the `diff` module, exporting a namespace, interfaces, and providing helpful comments describing the code. In this case, `index.d.ts` isn't linked to the original repository and has a separate version on npm, but it's maintained in sync with the `diff` library.

## Using `diff`

Now that we have the types, the error about lacking the necessary declaration file has gone away. We can use `CMD + click` to jump to different spots in the `diff` delaration file inside of `node_modules`.

DefinitelyTyped and the `@types` packages provide a way to add type declarations for projects that don't have built-in TypeScript support, making it easier to work with these libraries in your TypeScript projects.

If you see this error again, you'll know how to fix it!

The DefinitelyTyped project provides type declaration files for many popular JavaScript packages.

Adding Missing Types Declaration Files

Fixing "Could Not Find A Declaration File"

Type checking is awesome, but sometimes it gives you error messages that can be challenging to interpret and resolve.

Whether you're new to TypeScript or looking to deepen your understanding, this tutorial is your guide to understanding some of TypeScript's most common errors.

In this tutorial, you'll find challenges centered around reading error messages and practical solutions to solving the issues they describe. You'll gain insights into:

-   **Type Not Assignable Error:** Understand why type mismatches occur and explore solutions like widening type definitions.
-   **Property Does Not Exist on Type Error:** Learn how to deal with undeclared properties and the use of Record types.
-   **Possibly Null or Undefined Error:** Tackle nullability issues with techniques like optional chaining and type narrowing.
-   **Types of Property are Incompatible Error:** Decode complex error messages and refine your type definitions.
-   **Type Unknown Error:** Handle unknown types effectively.
-   **Expression of Type String Can't Be Used to Index Type Error:** Overcome indexing issues with strategic type refinements.
-   **Property Has No Initializer and Is Not Definitely Assigned in Constructor Error:** Address class property initialization challenges.
-   **Conversion of Type May Be a Mistake Error:** Navigate type conversion with caution.
-   **Cannot Redeclare Block-scoped Variable Error:** Resolve naming conflicts and understand TypeScript's module detection.
-   **Could Not Find a Declaration File for Module Error:** Deal with missing type declarations in JavaScript modules.

### Instructions

This tutorial is split into several exercises. Each features a problem that encourages you to take an active, exploratory approach to finding a solution.

### You'll need to:

- Watch and read the problem introduction.
- Check out the TypeScript or React documentation or dive into type definitions to look for help
- Try a solution and check your work. There may be more than one way to solve the challenge! Whether you succeed or get stuck, watch and read the solution and check out the included code.

### Prerequisites

You’ll need a working understanding of TypeScript.

### Running the Exercises

Clone [the Error Messages Tutorial repo](https://github.com/total-typescript/error-messages-tutorial?tab=readme-ov-file), and use npm or yarn to install dependencies.

If you [follow this link to use gitpod](https://gitpod.io/#https://github.com/total-typescript/error-messages-tutorial), you can work in a full VS Code coding environment running in your browser.

Follow the instructions in the [README](https://github.com/total-typescript/error-messages-tutorial/blob/main/readme.md) for more.


TypeScript boosts productivity but faces pitfalls like type mismatches, null values, & puzzling errors. Learn to spot & solve these for swift progress.

Errors Messages Tutorial

User object and a UserProfile interface, your mission is to understand and solve a type error. 'blue' is not assignable to 'light' or 'dark'

This lesson explores type assignability in TypeScript, including why this error occurs and how to fix it. With practical examples and step-by-step guidance.

Understanding and Fixing 'Type Not Assignable' Errors

Fixing "X Is Not Assignable To Y"

Troubleshoot a TypeScript error that says a property does not exist on a certain type.

There are a few ways to solve the Property Does Not Exist on Type error in TypeScript.

Techniques for Solving Property Does Not Exist on Type Error

Fixing "Property Does Not Exist On Type"

TypeScript will show and error when you try to access a property that could be null or undefined.

The "possibly null or undefined" error is a common TypeScript error that can be solved in a few different ways.

Solving the Possibly Null or Undefined Error

Fixing "X is Possibly Null Or Undefined"

Sometimes TypeScript error messages are long and confusing. Learn how to make them more readable.

There are a few ways to make TypeScript error messages more readable and informative.

Getting More Useful TypeScript Errors

Fixing "Types Of Property Are Incompatible"

Explore techniques for solving the 'is of type unknown' error in TypeScript.

Narrowing is a great way to handle unknown errors when working with try-catch blocks in TypeScript.

Use Narrowing to Handle unknown Errors

Fixing "X Is Of Type Unknown"

Fix an error in TypeScript that says an expression can't be used to index a certain type.

Explore a few options for indexing into an object without errors in TypeScript.

Options for Indexing Without Errors

Fixing "Expression Can't Be Used To Index Type X"

Resolve errors related to private property initializers and constructor assignments in TypeScript.

TypeScript errors related to class properties have a few ways of being resolved.

Options for Resolving Class Property Errors

Fixing "Property X Has No Initializer"

TypeScript will give an error when attempting to convert a type that doesn't sufficiently overlap with another type.

There needs to be sufficient overlap in order convert one type to another.

Working Around Type Conversion Errors

Fixing "Conversion Of Type X May Be A Mistake"

There are two ways to solve an error related to re-declaring a block-scoped variable in TypeScript.

Treating a file as a module or adjusting TypeScript configuration can resolve the re-declaring a block-scoped variable error.

Transcript

Fixing "Could Not Find A Declaration File"

Transcript