[00:00] In this exercise, we have a user object, which just has a name of Matt, and then we're passing in an age of 24. 24, huh? I wish I was 24. Here, we're getting this funny error saying property age does not exist on type name string. Your job is to work out how we can potentially make this error go away

[00:18] without changing the runtime code too much. And yeah, I think that's all I'm gonna give you. I think I have two or three solutions to this. Good luck.

Here we have a `user` object that just contains a name set to 'Matt':

```typescript
const user = {
	name: "Matt",
};
```

We then pass in an age of 24:

```typescript
user.age = 24; // red squiggly line under age
```

There is an error underneath `age` that reads:

```typescript
// hovering over age shows:
Property 'age' does not exist on type '{ name: string; }'.
```

## Challenge

Your challenge is to figure out how to make this error go away without changing the runtime code too much.

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

[00:00] Okay, let's investigate this. This age property here, property age does not exist on type name string. We can see that there are two kind of like dynamic things going on here. So the age is the dynamic part of this error. And the other dynamic part is this name string object here. Where's this name string coming from? Well, if we hover over user here,

[00:19] we can see that it's being inferred as name string. Now this is interesting because TypeScript only lets you index into properties that it knows exist. And what we're doing here when we say user dot something is we're indexing into it. So the only one that we can potentially index into

[00:37] is user dot name here. And so we can either do it with a dot syntax or with user name here. So how do we tell this object up here that it might contain an age property? That's interesting. Well, that is solution one because what TypeScript is doing here is it's saying,

[00:57] okay, you've added a name property to this, but I don't see anywhere that I'm supposed to care about an age property as well. So we can tell TypeScript that it's supposed to care about an age property on this user, even though it doesn't exist yet. We can declare a type of user and then say user is user

[01:16] and then give it an optional age property. If we were to give it a non-optional age property, then we would have to declare it, property age is missing in type name string but required in type user, we'd have to add it when we actually create the user. But we now have to do it like this,

[01:32] where we say const user, user dot age equals 24. We can even go super wide on this as well because what we're doing here is we're saying, okay, we have a type of user that has the keys of name and age associated with it. But we could say that this user is a record

[01:50] and this record would be essentially an object with an index signature of string. So essentially you can just like index into any part of this object and then you can add onto that either a number or a string. So works with a number or a string, doesn't work with a Boolean, let's say.

[02:09] Type Boolean is not assignable to type string or number. There you go, that's assignable again. So yeah, there's a couple of solutions here. And you might be looking at this original code and thinking why doesn't TypeScript just infer this for me? Why doesn't it just say, okay, yep, you want to dynamically add

[02:29] like an object property here, that's totally fine by me. Well, TypeScript, like it has to make choices as to what kind of things it's going to error on and what kind of things it isn't going to error on. And what TypeScript has decided is that in general this kind of code,

[02:46] it's more likely to be a bug than not. So if you don't know or TypeScript doesn't know about what shape this user is supposed to be, it's not going to try and infer it based on what you do, because this code could very easily just be refactored to just age 24, you know?

[03:04] And now of course, like because TypeScript understands that there is an age property on there, it's actually going to let you kind of manipulate it and do stuff to it. And it knows that then user has an age property. So if you find yourself writing a lot of code like this, where you're constructing objects sort of later down the line, often it's actually just better to refactor it

[03:23] into creating immutable objects or objects at least created like this instead of created dynamically. There are situations of course, where you want to create objects which are relatively dynamic. And in those situations you can use records. So records are really interesting and we're going to revisit them on a couple of exercises in this course, I think.

[03:43] But in general, you will want to tell TypeScript about potential object properties that your object could contain. And then further down the line, you can add them. So yeah, this is what this error basically means. Property X does not exist on type Y. You either need to use TypeScript to tell TypeScript about it.

[04:03] So you type annotations like this or widen out that type even more, or if you can just move the declaration in line and then you just get all the benefits of doing so. And you don't actually need to use any TypeScript to make this work.

## Understanding TypeScript Error

We encounter an error when trying to declare a new property that isn't predefined in our type or interface.

```typescript
Property 'age' does not exist on type '{ name: string }'.
```

In this case, the `age` is one dynamic part, and the `{ name: string }` are both dynamic in this error message.

In TypeScript, we can't just add new properties without explicitly declaring them in our object type or interface. This is because TypeScript needs to know that a property exists before it can let us interact with it.

If we hover over `user`, we can see that it's being inferred as `name: string`:`

```typescript
const user = {
	name: "Matt",
};

// hovering over `user` shows
const user: {
	name: string;
};
```

TypeScript only lets you index into properties that it knows exist. In this case, we can only index into `user.name`.

When we try to add an `age` property to the `user` object, TypeScript throws an error because it knows it doesn't exist.

There are a few ways to solve this error.

## Declare All Properties in Advance

The first option is to declare all the properties you think you might need in advance:

```typescript
type User = {
	name: string;
	age: number;
};
```

However, the issue with this approach is that you now have to include an 'age' property every time you create a new 'user' object.

## Use Optional Properties

To get around the need to include every property every time, we can use the `?` operator to make a property optional:

```typescript
type User = {
	name: string;
	age?: number;
};
```

This technique tells TypeScript that a `User` object will always have a `name` string, but it might also have an `age` number.

## Use a Record Type

Another way to solve this error is to use a Record type. This lets you use any string as an index, then specify the type of the corresponding value:

```typescript
const user: Record<string, number | string> = {
	name: "Matt",
};

user.age = 24;
```

Using a Record allows us to index into any string part, and add a value of a number or a string to it. In this case, we'll index into `age` and add a value of `24`.

Records will work in this case, but they can often be too broad and lead to mistakes down the line.

## Wrapping Up

Any of these techniques will work to solve this error, but in general, it's best to tell TypeScript about potential object properties that your object could contain since they can be added as needed.

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"

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"

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 "Property Does Not Exist On Type"

Transcript