[00:00] In this exercise we have a user object and we have an interface user profile. We are then assigning the annotating user with the user profile type and passing it some stuff. But we're getting an error down the bottom here. This error is saying type blue is not assignable to type light or dark.

[00:19] Your job is to work out why this error could be happening and what kind of ways we could potentially fix this. I thought of three potential solutions to this. Good luck.

In this exercise, we are looking at a `user` object and a `UserProfile` interface in TypeScript.

```typescript
interface UserProfile {
    id: string;

    preferences: {
        theme: "light" | "dark";
    };
}

let user: UserProfile = {
    id: "123",
    preferences: {
        theme: "blue",
    },
};
```

Our goal is to find 3 possible solutions for a type error:

> **Error Message:** Type 'blue' is not assignable to type 'light' or 'dark'.

Your challenge is to uncover the root cause of this error. Investigate why TypeScript is rejecting the 'blue' value and brainstorm viable solutions for this issue.

Here are some pointers to guide you:

- Review the `UserProfile` type definition.
- Consider the range of values acceptable for the type in question.
- Think about how TypeScript's type system works in terms of assignability and compatibility.

Embrace this opportunity to enhance your TypeScript debugging skills and deepen your understanding of its type system. Best of luck in finding an effective solution!

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

[00:00] Okay, let's take a closer look at this error. We can see here that we have type blue is not assignable to type light or dark. You can probably get a sense for what this error means just by looking at it, right? Sure, we're trying to pass blue into a slot expecting light or dark.

[00:18] And if we change this to either light or dark, then it's gonna be happy, right? Brilliant. Now, the key word there though is assignable. And that's a really interesting word for this situation because assignability is key to understanding TypeScript as a whole. You might be thinking,

[00:36] okay, what are the other ways that we can solve this error? So let's explore assignability through that. Sure, we can solve the error by making sure that the thing we're passing to it is assignable to light or dark. So either light or dark is gonna be good. Or we can actually add blue into the type itself too. So we get light or dark or blue.

[00:55] And now blue is assignable to it. It can be passed into that slot because blue is one of the members of the union. Or we can widen theme out even further and make theme into a string here. Now, the only thing that we can't pass to it are things that are not strings, so number. So type number is not assignable to type string.

[01:15] So assignable just means can you pass it into that slot or can you not? So you can pass a more specific type into a wider type. So because blue we've got here, sure, we can pass it into this string here because blue is string, even though it's a more specific type of string.

[01:34] And if that string is part of, let's say, a member of strings or a union of strings, then that's gonna be fine too. So here light or dark or blue is kind of wider than just blue, but we can just pass in blue itself. Hopefully that makes sense. So assignability just means can I pass this into that slot?

[01:53] And the original error that we were looking at here, basically that's what it means. Type blue cannot be passed into a slot expecting light or dark. And so you can use this to kind of understand what assignability means in general. So like when we're looking at more complex errors, you'll often see that this object is not assignable to this object.

[02:13] That's what that means. There's some kind of assignability error going wrong there.

Let's investigate a common TypeScript error: "Type is not assignable"

```typescript
Type 'blue' is not assignable to type 'light' or 'dark'.
```

This error occurs when we try to pass a value (in this case, `'blue'`) into a slot that expects one of the types (`'light'` or `'dark'`).

Assignability is a crucial concept in TypeScript. It determines whether a value can be passed into a slot of a specific type or not. Let's look at a few ways to fix the error.

1. Pass a valid value: Replace `'blue'` with either `'light'` or `'dark'`.

2. Add the new value to the type definition: Update the type to include `'blue'`:

   ```typescript
   type Theme = "light" | "dark" | "blue";
   ```

   Now, `'blue'` is one of the members of the union, and it can be passed into the slot.

3. Widen the type definition: Change the type definition to accept any string:

   ```typescript
   type Theme = string;
   ```

   With this change, we can pass any string value, except for non-string types such as numbers:

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

Assignability errors occur when a value cannot be passed into a slot with a certain type. For example, if TypeScript raises an error saying that "Type `blue` cannot be passed into a slot expecting `light` or `dark`", this means there's an assignability issue. Understanding assignability can help you make sense of more complex errors that involve objects not being assignable to other objects.

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"

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

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.

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 "X Is Not Assignable To Y"

Transcript