[00:00] Here we have a dog interface, which has bark Boolean on it, nice and abstract. And then we have a cat here, which is saying purr true. And then we have a dog down the bottom and we're trying to assign the dog to be a dog, but we're saying cat as dog.

[00:18] So we're trying to cheat TypeScript here by saying, okay, I'm gonna force this cat to be a dog. I'm gonna put a collar on it, I'm gonna make it bark or whatever, gonna stop it from purring, poor cat. But we're getting an error. Conversion of type purr Boolean to type dog may be a mistake because neither type sufficiently overlaps with the other. If this was intentional,

[00:38] convert the expression to unknown first. Property bark is missing in type purr Boolean, but required in type dog. Your job is to work out why this error is occurring and what we can do to fix it. Good luck.

Here we have a `Dog` interface and a `cat` object.

The `Dog` interface is defined with a single boolean property `bark`:

```typescript
interface Dog {
	bark: boolean;
}
```

We also have a `cat` object whose property `purr` is set to `true`:

```typescript
let cat = { purr: true };
```

Dogs bark, and cats purr. So it makes sense that TypeScript gives us an error when trying to force the `cat` object into a `Dog` type:

```typescript
let dog = cat as Dog; // red squiggly line under `cat as Dog`
```

The error reads:

```typescript
// Hovering over `cat as Dog` shows:

Conversion of type 'purr: boolean' to type 'Dog' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Property 'bark' is missing in type 'purr: boolean' but required in type 'Dog'.
```

In other words, there's a conflict because the `Dog` interface requires a `bark` property, while the `cat` object has a `purr` property.

## Challenge

Your challenge is to figuring out the root cause of this error and devise a way to fix it.

To do this, you'll need to align the `Dog` interface and the `cat` object to share a common property.

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



[00:00] Okay, let's break down the error work out why it's occurring conversion. What is being converted from one thing to another? Well, we're trying to convert a cat into a dog, right? We're trying to convert type per Boolean to the dog interface, right? And it may be a mistake. So it's basically sort of this is like a warning to you, essentially, because neither type sufficiently overlaps with the other.

[00:27] So there's not enough overlap for TypeScript to say, sure, you've actually converted this properly. And so it's giving you a warning, right? It's basically saying, are you sure? Like, it's like, you know, you're trying to whack it over the head, because as the as assertion is kind of like a whack over the head to TypeScript, and it's sort of fallen to the ground and it's going, are you sure you meant to do this? I don't think you really meant to.

[00:49] If this was intentional, convert the expression to unknown first, and then it gives you the actual reason for why it's happening. Property bark is missing in type per Boolean, but required in type dog. So we could, for instance, we could certainly say bark true here. And now the error would totally go away because we've added a bark property to the thing that we're trying to assign to it.

[01:12] Can I do like a per like Boolean up here too? Yeah, now there's enough overlap between them because dog might contain a per. And so because basically TypeScript only shows this error, if you're trying to convert two objects which have no shared properties, so it's more like a convenience error.

[01:34] And because it's a convenience error, it's saying, if this was intentional, convert the expression to unknown first. And so you can actually do this, you can say cat as unknown as dog. And this will often come up in in code because TypeScript has actually warned you to do this and told you to do it. But this is totally unsafe. What we're doing here is we're saying, okay, we're forcing it absolutely forcing it to be a dog here.

[02:02] And so TypeScript sort of lets you do this. So this is equivalent to doing as any as dog. It's absolutely equivalent. Neither is better than the other here. You might get a warning about one from your linter, but not from the other.

[02:17] So this is pretty dangerous, and you often shouldn't be doing it. But there might be situations where you want to do it, and you don't care about the consequences. Because the consequences are here that you could do something like, let's say, dog.bark.valueOf, for instance, and this would be a runtime error because bark doesn't actually exist at runtime.

[02:40] So we are lying to TypeScript. TypeScript has tried to warn us not to lie to it by giving us this long error by basically saying, are you sure? Are you sure? Neither type sufficiently overlaps with the other. There's no overlap here. But sure, here's the way you can knock me out if you want to.

[02:57] So this is what is causing this error. And this is a way around it. But this error really is a red flag saying you can probably find a better way of modelling this. So if you want to do this, I would actually prefer you to use as any as dog, because it's more explicit that this is something that you're doing that's wrong here. Morally wrong, you know, terrible.

[03:19] So you should actually flag it as something that really shouldn't be done and something that should be refactored later. You can even add a comment here saying, find a better way to do this, please. Someone more senior than me, let's say. So yeah, this is what this error means. This is how to get around it. But I really do recommend you follow the error and try to find a different way of modelling this.

TypeScript gives us an error when trying to convert a `cat` into a `Dog` because there isn't sufficient overlap between the two types:

```tsx
interface Dog {
	bark: boolean;
}

let cat = { purr: true };

let dog = cat as Dog; // red squiggly line under `cat as Dog`
```

This warning message is like a request for confirmation from TypeScript. It's like TypeScript is asking if we are sure we want to perform this conversion.

That said, there are a couple ways to get around this error.

## Convert to `unknown` First (Dangerous!)

If you don't care about the consequences of converting one type into another, you can convert first to `unknown` or `any` before the target:

```typescript
let dog = cat as unknown as Dog;

// or

let dog = cat as any as Dog;
```

Using `as` is a common pattern, but in this case it's actually unsafe because you're forcing the conversion even though properties aren't shared. Depending on your linting settings, you may get a warning when using one or the other.

This workaround might lead to runtime errors, like when trying to access the property of `bark`, which doesn't exist in runtime. By performing this conversion, you're essentially deceiving TypeScript about the nature of your objects.

Resorting to `as any as Dog` might make the error message disappear, but it's not best practice.

Think of this error as being a red flag that you should find a better way of modelling your application!

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"

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"

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 "Conversion Of Type X May Be A Mistake"

Transcript