Debugging Property does not exist on type ‘{}’ in TypeScript

“Property does not exist on type” is a TypeScript-only error message. It occurs when the user try to access, modify or set an property that doesn’t exist in the object’s type.

In this short article, we will show you why “Property does not exist on type” error message occurs, as well as how to debug and fix it.

Reproduce “Property does not exist on type”

Let’s see an example where we reproduce the “Property does not exist on type” error.

const example = {};
// The line below will throw this error
// Error: Property 'name' does not exist on type '{}'.ts(2339)
example.name = 'LinuxPip';Code language: JavaScript (javascript)

The first line define a variable named example, then assign it to an empty object.

TypeScript doesn’t allow this behavior, and would result in Property 'name' does not exist on type '{}' error. So the error simply means we cannot assign values or access properties that are not in the on the object type.

Fix: Define the object explicitly

In order to fix the error, define the object explicitly with all the properties you want to access later.

Below is an example of how we should do that if we already know all the property names you would want to access later.

// EXAMPLE 1 : Required properties are known ahead of time
type Staff = {
  id?: number;
  name?: string;
};

const example: Staff = {};

example.id = 1;
example.name = "Average Joe";Code language: JavaScript (javascript)

By using a question mark after the property names, we’ve essentially told the interpreter that those properties are optional.

For more information, consult the TypeScript language documentation on Optional Properties.

In the example, the example object is created empty, and id and name optional properties are assigned at a later point in the program.

Without optional property syntax, initialize an object without specifying its properties will cause “Property does not exist on type {}” error to pop up whenever you’re access or modify any of its properties.

Fix: Use any type

In TypeScript, you can assign the any type to the object. As its name implies, if a property is typed as any, it can hold any type (even the object itself).

A side effect if any type is that it ignores all compile time checks, hence makes “Property does not exist on type {}“ error disappear.

let bar: any = {};
bar.foo = "foobar"; Code language: JavaScript (javascript)

Note : It is advised that you only use any as a quick and dirty fix.

Alternatively, you can read about unknown – this is the type-safe counterpart of the any type.

Fix: Use index signature

Alternatively, we can also define a variable key if we don’t have an idea of the properties you would want to access or set later. Let’s analyze an example.

// EXAMPLE 2 : Required properties are unknown ahead of time
type NewStaff = {
  // Pre-define a variable key 
  [key: string]: any;
  name: string;
};

const example2: NewStaff2 = {
  name: "Average Joe 2",
};

example2.department = "Blogosphere";Code language: JavaScript (javascript)

In the code snippet above, [key: string]: any is the syntax to describe the type of possible values. This is called index signature, and the index signature property type must be either ‘string’ or ‘number’. (which is string in the example) Find out more about it at TypeScript documentation on Index Signatures.

We set the name property to string in the NewStaff type, so the type checker would throw an error if the property is not provided or is set to a value of a different type.

Please note that the usage of index signature is not safe. It's always better to explicitly specify the properties ahead of time in order to maintain type safety. 

Union type – safer index signature

If you know how the values could be, you can use a more specific syntax index signature to ensure better type safety.

// EXAMPLE 3 : Safer index signature syntax
type SafeStaff = {
  [key: string]: string | number;
  name: string;
  id: number;
};

const example3: SafeStaff = {
  id: 1,
  name: 'James',
};

example3.department = 'accounting';
example3.age = 20;Code language: JavaScript (javascript)

The string | number syntax in the example is referred to as union type in TypeScript. It's still index signature, but the name and id properties are strings and they return different types.

Without union type, once a property is indexed with a string key, it returns a value of type string, you cannot add another string key to the interface that has a value of type number. Doing so would result in another error called “Property 'id' of type 'number' is not assignable to 'string' index type 'string'“.

type SafeStaff = {
  [key: string]: string; // only strings are allowed
  name: string;
  // Result in error: Property 'id' of type 'number' is
  // not assignable to 'string' index type 'string'.ts(2411)
  id: number;
};Code language: JavaScript (javascript)

In the example, SafeStaff , we don’t use union type, so the object only allows string values, trying to add another string key that has  number values would result in an error message.

To sum up, in order to fix “Property does not exist on type '{}'” error, you would have to make sure that the object you’re trying to modify or access actually have the property defined. The properties can be explicitly defined or optionally specified using TypeScript’s index signature.

We hope that this tutorial provides useful information to help you successfully fix the “Property does not exist on type ‘{}'” error message. There are other related guides that we’ve covered such as IntelliSense doesn’t work in VSCode or How to automatically indent your code in Visual Studio Code.

If you spot any error in the article, or have a suggestion, please kindly let us know via the comment section below.