Property does not exist on type – How to Fix Property does not exist on type Object in TypeScript?

Property does not exist on type: When we try to access a property that is not contained in the object’s type, we get the “Property does not exist on type Object” error.

To fix the error, explicitly type the object properties or use a type with variable key names.

Let us see an example to know how this error occurs

index.ts:

// Create an object and store it in a variable
const gvn_obj: Object = {
  EmpId: 6136,
  EmpName: 'John',
};

// Here the key salary does not exist on the above created object 'gvn_obj'
// So, when we try to access it we get a Property 'salary' does 
// not exist on type 'Object' Error.
gvn_obj.salary = 50000;

Output:

script.ts(10,9): error TS2339: Property 'salary' does not exist on type 'Object'.

Explanation:

Here we typed the gvn_obj variable as Object and tried to access the salary property on the object.

The salaryproperty, however, does not exist on the Object type, therefore the type checker returns an error.

Fixing Property does not exist on type Object Error in TypeScript

1)When you know property names ahead of time

// This is the case when you know property names ahead of time
// Give the type(datatypes) of property names (variable)
type FirstEmploy = {
  EmpName: string;
  EmpId: number;
  salary?: number;
};

// Create an object for the above type object 
const object_1: FirstEmploy = {
  EmpName: 'Alex',
  EmpId: 8459,
};

// Add a new key value value(here salary) to the above object using optional chaining(.) 
object_1.salary = 50000;

// Print the above object
console.log(object_1);

Output:

{ EmpName: 'Alex', EmpId: 8459, salary: 50000 }

Explanation:

• Here it shows how to type an object when you know the property names and the types of the values ahead of time.
• You can use a question mark(?) to indicate properties that you will not provide when initializing the object.
• Now that the salary property exists in the object’s type, we can securely access it.

2)When you DON’T know All the property names ahead of time

You may not know the names of all of the object’s keys or the shape of the values ahead of time in some scenarios.

index.ts:

// This is the case when you don't know all the 
// property names ahead of time
type SecondEmploy  = {
  // we will use any if we dont know the type of variable
  [key: string]: any; 
  EmpName: string;
};

const object_2: SecondEmploy = {
  EmpName: 'Michel',
};
// Add the address field to the above created object using the optional chaining(.) operator
object_2.Address = 'Hyderabad';
object_2.EmpId = 2468;

// Print the above object
console.log(object_2);

Output:

{ EmpName: 'Michel', Address: 'Hyderabad', EmpId: 2468 }

Explanation:

The {[key: string]: any} syntax is known as an index signature, and it is used when the names of the object’s keys or the shape of the values are unknown ahead of time.

The syntax simply says that when the object is indexed with a string key, it will return a value of any type.

NOTE:

If you know any of the names of the properties ahead of time, you can specify them to improve type safety.

In the SecondEmploy type, we set the EmpName property to string so that the type checker would throw an error if the property was not provided or was set to a value of a different type.

You can use a more particular index signature for improved type safety if you don’t know the names of all of the object’s keys but know the shape of the values.

index.ts:

type SecondEmploy   = {
  [key: string]: string | number;
  EmpName: string;
  EmpId: number;
};

const object_2: SecondEmploy   = {
  EmpName: 'Michel',
  EmpId: 4586,
};

object_2.salary = 50000;
object_2.EmpAddress = 'Hyderabad';

console.log(object_2)

Output:

{
EmpName: 'Michel',
EmpId: 4586,
salary: 50000,
EmpAddress: 'Hyderabad'
}

The index signature in the preceding example indicates that when the object is indexed with a string key, it will return a value of type string or number.

In TypeScript, the string | number syntax is referred to as a union type.

Because the EmpName and EmpId properties are both strings and return distinct types, we had to utilize a union type.

In other words, you cannot specify that when the object is indexed with a string key, it returns a string value (type string) and then add another string key to the interface with a numeric value (type number).

index.ts:

type SecondEmploy = {
  [key: string]: string;
  EmpName: string;
  
  // Here we get an error i.e., Property 'EmpId' of type 'number' is not
  // assignable to string index type 'string'
  EmpId: number;
};

Output:

script.ts(7,3): error TS2411: Property 'EmpId' of type 'number' is not assignable to string index type 'string'.