Beginner's TypeScript #20

⭐ Error Message: "Property Does Not Exist On Type" ⭐

we have a user object that just contains a name set to 'Uri':

const user = {
  name: "Uri",
};

We then pass in an age of 24:

user.age = 24;

There is an error underneath age that reads:

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

We will figure out how to make this error disappear without changing the runtime code too much.

👉 Solution

We encountered an error when declaring a new property not predefined in our type or interface.

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 not 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 the user, we can see that it has been inferred as name: string:

const user = {
  name: "Uri",
};

// 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 does not exist.

There are a few ways to solve this error.

1️⃣ Declare All Properties in Advance

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

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

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

2️⃣ Use Optional Properties

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

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.

3️⃣ 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, and then specify the type of the corresponding value:

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

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

---

I hope you found it useful. Thanks for reading. 🙏

Let's get connected! You can find me on:

• Medium: https://medium.com/@nhannguyendevjs/
• Dev: https://dev.to/nhannguyendevjs/
• Hashnode: https://nhannguyen.hashnode.dev/
• Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
• X (formerly Twitter): https://twitter.com/nhannguyendevjs/
• Buy Me a Coffee: https://www.buymeacoffee.com/nhannguyendevjs/