[00:00] In this exercise, we have some RoutingConfig here, which is an object which contains some routes. The routes here are an array of path, which is a string, and component, which is a string. We then have a CreateRoutes function, which takes this config and puts it in a type here. We have routes, which again, path string,

[00:18] component string, which is an array of those routes. If we look inside this RoutingConfig here, we have a mega error. Oh boy, big old error, can't even put it all on the screen at once. Your job is to work out what this mega error is doing. And there are, I think, three or two or three different ways that we can,

[00:37] because there is a little component 12 here, which might look a bit out of place. There are a couple of ways that we can make this error more obvious as to what it's doing, and actually get our error a bit closer to where we want it and make it a bit more readable. So your job is not necessarily to solve the error,

[00:55] but to make the error more readable and actually have it on this line here. Good luck.

In this exercise, we have a `routingConfig` object which contains some routes. These routes are an array of objects, each with a `path` and a `component` property, both of which are expected to be strings:

```tsx
const routingConfig = {
	routes: [
		{
			path: "home",
			component: "HomeComponent",
		},
		{
			path: "about",
			component: 12,
		},
		{
			path: "contact",
			component: "ContactComponent",
		},
	],
};
```

We also have a `createRoutes` function that takes this `routingConfig`, and maps it into a type:

```typescript
const createRoutes = (config: {
	routes: {
		path: string;
		component: string;
	}[];
}) => {};
```

When calling `createRoutes` with the `routingConfig`, we get a large error message:

```typescript
createRoutes(routingConfig); // red squiggly line under routingConfig

// hovering over routingConfig shows:
Argument of type '{ routes: { path: string; component: string | number; }[]; }' is not assignable to parameter of type '{ routes: { path: string; component: string; }[]; }'.
  Types of property 'routes' are incompatible.
    Type '{ path: string; component: string | number; }[]' is not assignable to type '{ path: string; component: string; }[]'.
      Type '{ path: string; component: string | number; }' is not assignable to type '{ path: string; component: string; }'.
        Types of property 'component' are incompatible.
          Type 'string | number' is not assignable to type 'string'.
            Type 'number' is not assignable to type 'string'.
```

## Challenge

Your job is to figure out what this error is telling us, and make the error more readable.

Hint: Note the `component: 12` in the code that seems out of place.

Your main objective isn't to solve the error, but rather to make the error message more clear and ensure it appears on the correct line of code.

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

[00:00] Okay, let's first of all tackle this error, understand what's causing it, understand at least how to read this error at all. Okay, let's go line by line. Argument of type roots and all of this kind of crazy that you can see here that like, we've got a single quote there and a single quote here,

[00:19] and that's basically saying the argument type that we're passing in is not assignable to parameter of type roots path component string this, okay. This is pretty unreadable already. Types of property roots are incompatible. So, okay, what it's saying is we're trying to pass in an argument.

[00:37] So this is essentially the argument we're passing in, this root in config into a parameter, and the parameter is this config here, and these two are incompatible. And it's saying that the type of property roots is incompatible. So this property roots here, something inside roots has gone bad. We carry on.

[00:57] Type path string component string or is not assignable to, okay, extremely unreadable, but there's an assignability error here. So it's basically saying that the root property, something is wrong inside there. We keep going further. Type path string component string or path string component number

[01:16] is not assignable to type path string component string. Okay, getting a bit closer there. We can see that there's like a union type in the first one, and then actual sort of just object type in the second one. Type path string component number is not assignable to path string component string.

[01:33] Types of property components are incompatible. So from this, we can assume that something has gone wrong with a component somewhere in this array. That's good. Types of property component are incompatible. Type number is not assignable to type string. Okay, so reading from this,

[01:52] we can infer that type like, okay, something inside roots is bad. Something inside a component inside those roots are bad, and it's bad because it's type number instead of type string. How could we have gotten that information faster? Well, first of all, when I'm reading a big error like this,

[02:10] usually it's because some deep, big object is not assignable to some other big, deep object. What I like to do is actually read it bottom to top, because here I can see that, okay, type number is not assignable to type string. What tends to happen in these situations is that because this error is like, I'll tell you why it's happening,

[02:30] but it's basically building like a big legal case, right? Against your code. And it starts by saying, you were there on the night of the blah, blah, blah, blah, you were doing this, you were doing this. And then it finally sort of like goes all the way down

[02:47] until it says, you were holding the murder weapon, right? Actually gives the most relevant piece of information right at the end when it's gonna like shock the jury the most. So we have here type number is not assignable to type string. That's the key difference here. There is somewhere a number being passed into a slot that expects a string.

[03:07] So I tend to read that first. Then I'll tend to scan up and see what types of property are being incompatible here. So obviously component is the key property here. And then if I scan further up, I can see type of property roots are incompatible. So if I look up here, I know that there's something,

[03:24] there's a number where a string is being expected. It's gonna be in a component inside the roots property. And this is really good for when you have massive conflict objects that are 600 lines long or something. But now I've told you how to decode this long error. We really need to understand how to make this error better

[03:43] because this error is absolutely horrendous as it currently stands. How do we make it so that this line, this component 12 is the one that actually errors? Well, we have a few solutions here. The first solution is you can literally just pass the object in line here.

[04:01] When you pass the object in line, you notice the difference here. Before we were declaring it as a separate object, this root and config. When you pass it in line, TypeScript is better able to make assumptions about what you're doing with that object. And you notice here that instead of having this huge legal case,

[04:18] we actually just have the relevant piece of information on the relevant line. The difference here is because we were declaring it in a separate object, TypeScript might have thought, well, you're gonna use that root and config for a few different things here. It's not just gonna be passed into this one place. So instead of showing the error up on the root and config

[04:37] where it might not be actually needed, let me show the error further down here. And so because the error is far away from the error site, it needs to give you this massive legal case to show why this error needs to occur. Whereas if it can give you all the contextual information

[04:55] just by saying, it's right here, it's right here, then it only needs to give you the relevant information. So that's one way of doing it. The other way is let's say we took this root and config, put it in a type and we put it that type outside and we actually assigned that to the root and config here. So now root and config is of type root and config.

[05:14] It's going to give us a better contextual error closer to the site. Type number is not assignable to type string. If we remove this, then we're gonna get our error further down here. But because our type is right up here showing us the way, we actually get the error in line. So this is a key way of doing it as well.

[05:33] And a type annotation just at the right moment can save you a lot of pain. And there's one more here. Which one? Oh yeah, we're doing satisfies here. So satisfies is another way of specifying this, which is pretty useful. It means that our root and config

[05:50] is actually gonna get sort of inferred as what it is. Satisfies tends to work really well with config objects. And it's also going to give our error in the correct place. So yeah, config objects in general, you need to use some sort of type annotation, whether that satisfies or whether that's a variable annotation like we see here.

[06:10] And yeah, this is really, really key to understanding how to break down these big errors. Often these big errors are happening because the error site is far away from where it needs to be. So adding a type annotation just in the right place, if I can just even copy this over, just pull this up onto here, bam.

[06:29] Now my error is exactly where I want it and it is a ton more readable.

We have a large error message that was difficult to understand:

```typescript
Argument of type '{ routes: { path: string; component: string | number; }[]; }' is not assignable to parameter of type '{ routes: { path: string; component: string; }[]; }'.

Types of property 'routes' are incompatible.

Type '{ path: string; component: string | number; }[]' is not assignable to type '{ path: string; component: string; }[]'.

Type '{ path: string; component: string | number; }' is not assignable to type '{ path: string; component: string; }'.

Types of property 'component' are incompatible.

Type 'string | number' is not assignable to type 'string'.

Type 'number' is not assignable to type 'string'.
```

The first line tells us that when we pass the `routingConfig` object into the `createRoutes` function, the shape of the object is not compatible with the shape of the parameter.

Next we see that the `routes` are incompatible.

Continuing on, we can see that a union of `string | number` is trying to be assigned to just `string`.

Finally, we see that `number` is not assignable to `string`.

This is a lot of information to process!

## Start from the Bottom

Usually when faced with a large error message like this, it's a good idea to start from the bottom.

Think of the error message as a legal case against your code. It starts with general context and builds up to the most relevant piece of information at the end. That's why it makes sense to start at the bottom.

Since we have a `number` being passed into a slot that expects a `string`, we can scan upwards to identify the property that's causing the issue. In this case, it's the `component` property.

Inside of the `routes` array, the `about` path's `component` property is `12` instead of a string:

```typescript
const routingConfig = {
	routes: [
		{
			path: "home",
			component: "HomeComponent",
		},
		{
			path: "about",
			component: 12, // Error occurs here
		},
		{
			path: "contact",
			component: "ContactComponent",
		},
	],
};
```

Now, we know what's causing the error and even have some ideas about how to fix it, but we still need to clean up the error message.

There are a few ways to make the error readable and informative:

## Pass the Object Inline

One way to make the error message better is instead of declaring `routingConfig` as a separate object, pass it inline:

```tsx
createRoutes({
	routes: [
		{
			path: "home",
			component: "HomeComponent",
		},
		{
			path: "about",
			component: 12, // Error occurs here
		},
		{
			path: "contact",
			component: "ContactComponent",
		},
	],
});
```

This lets TypeScript make better assumptions about the object, resulting in a more relevant error message.

Hovering over `createRoutes` shows us the shape:

```typescript
const createRoutes: (config: {
	routes: {
		path: string;
		component: string;
	}[];
}) => void;
```

Now there will be an error underlining the `component` where the error occurs:

```typescript
{
    path: "about",
    component: 12,  // red squiggly line under component
},
```

Hovering over `component` to see the error message, it's more clear:

```typescript
Type 'number' is not assignable to type 'string'.

The expected type comes from property 'component' which is declared here on type '{ path: string; component: string; }'
```

Having the separate `routingConfig` object does not give us nice error messages because TypeScript isn't sure if we will be using it in a different scenario elsewhere in the code.

## Use Type Annotations

Assigning explicit type annotations to the objects also will help TypeScript deliver a more concrete error message.

First, create a new `RoutingConfig` type, then use it as the `config` type for the `createRoutes` function:

```typescript
type RoutingConfig = {
	routes: {
		path: string;
		component: string;
	}[];
};

const createRoutes = (config: RoutingConfig) => {};
```

Then we can also annotate the `routingConfig` object:

```typescript
const routingConfig: RoutingConfig = {
	routes: [
		{
			path: "home",
			component: "HomeComponent",
		},
		{
			path: "about",
			component: "AboutComponent",
		},
		{
			path: "contact",
			component: "ContactComponent",
		},
	],
};
```

Again, this will give us a more relevant error message inside of `routingConfig`.

## Use the `satisfies` Keyword

Finally, we could use the `satifies` keyword on the `routingConfig` object to specify it as a `RoutingConfig` type:

```typescript
const routingConfig = {
	routes: [
		{
			path: "home",
			component: "HomeComponent",
		},
		{
			path: "about",
			component: 12, // red squiggly line under component
		},
		{
			path: "contact",
			component: "ContactComponent",
		},
	],
} satisfies RoutingConfig;
```

All of these strategies are great for getting TypeScript to provide more useful error messages.

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"

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"

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.

Resolving the Block-scoped Variable Error in TypeScript

Fixing "Cannot Redeclare Block-Scoped Variable"

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

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

Transcript

Fixing "Types Of Property Are Incompatible"

Transcript