The “Property does not exist on type ‘{}’” error occurs in typescript when you try to modify, set or access an object property that does not exist. For example, if you have an object with only two properties and you try to access a third property that’s not contained in the object type. You can fix the above error by explicitly adding the object property or use a variable of the same type or key names. You can bypass or override TypeScript type checking whenever preferable, because is not strictly to be used but I do suggest that you don’t do this often when building a big project. Doing it too much will throw a typescript error “Property does not exist on type ‘object’”
Below is what causes the above error and why it occurs.
const object1 = {};
// accessing property not defined in the above object will throw an error
// Error: Property 'name' does not exist on type '{}'.ts(2339)
object1.name = 'Justice';From the above, suppose the ‘object1’ is a JSON data that is coming from a particular API (application programming interface) as a result of an HTTP request made when we run the application. Because you didn’t define the object yourself, what you can do with it is to read only the available properties. We have an empty object already defined, therefore we cannot assign values or access properties that does not exist on the object type.
If you know all the required object properties, you can define the object explicitly and include all the properties you do want to access.
// Explicitly define the object type when you know all required property names
type Student = {
id?: number;
name?: string;
};
const obj: Student = {};
obj.id = 1;
obj.name = 'John Doe';
// Define the object type like below when you don't know ALL property names
type Student2 = {
// Define a variable key (you can research how it work if you don’t have any idea)
// what do note is that the variable does not have a particular name.
[key: string]: any;
name: string;
};
const obj2: Student2 = {
name: 'James',
};
obj2.program = “TypeScript”;The above first example illustrate how to define an object when you know all of it required property names and types of value that will be assign to it. Note that we were able to create a new empty object ‘obj’ of ‘Student’ because we marked all the object properties as optional with the question-mark symbol ‘?’ (it can be provided or remain null by default). That way, we can initialize the object as empty and later assign value to its properties, that’s the concept you need to understand.
We have included all the needed properties, therefore we will not get the “Property does not exist on type {}” error again when we access any of it because they all exist in the object. So, the key concept to note once again is that computers don’t lie and whenever you encounter such type of error, it means some adjustment needs to be done in your code.
If you don’t know the type of key, values, shape or structure of your object’s ahead of time, you have to use what’s called index signature as show below.
// Define the object type like below when you don't know ALL property names
type Student2 = {
// Define a variable key (you can research how it work if you don’t have any idea)
// what do note is that the variable does not have a particular name.
[key: string]: any;
name: string;
};
const obj2: Student2 = {
name: 'James',
};
obj2.program = “TypeScript”;Note that the first object property above has been declared as '{[key: string]: any}' with the index signature syntax. Remember to use this syntax when you don’t know how some of your object key and it value will look like. It’s also used when creating a regular variables and angular reactive-forms when it comes to defining separate input validators. The meaning of the index signature is that within the square bracket ‘[key:string]’ represent a key name. And the ‘:any’ represent the return value of the key declared so, ‘[key: string]: any’ means our object property will have a key of string and can be assigned a value or a function that returns any. If you want type safety, it will be good to specify each key type if you already know what value will be assigned to it.
Note that the ‘name’ property is set to a type of ‘string’ in the ‘Student2’ object above. Typescript type checker will check the type of key, value that will be provided in position for the property if is of the same type. It will throw an error if invalid type value is assigned to it and also if you don’t provide the property because is not optional.
Check also, how to fix error – JSX expressions must have one parent element in React
Furthermore, you can specify different return value for a particular object key if you’re aware of the different kind of values it can take. Example, when declaring a variable to hold user’s mobile numbers, you may be confused of making the type string or number because both types will work. Therefore, you can make your life easy by declaring the variable of all two types so that a string or number can be assigned. There is something called type signature in all programming languages and that’s what is implemented in TypeScript to make variable types possible (research if you haven’t heard it).
// Define the object type like below when you don't know ALL property names
type Student2 = {
// Define a variable key (you can research how it work if you don’t have any idea)
// what do note is that the variable does not have a particular name.
[key: string]: any | number;
name: string;
};
const obj2: Student2 = {
name: 'James',
};
obj2.age = 30;The above ‘[key: string]: any | number’ means that the object key can be indexed with a string key but it must be assigned a value or a function that returns string or number. The syntax of TypeScript union type is what we have used ‘string | number’ you can take your time and read about that from the official TypeScript documentation.
However, Typescript will throw “Error: Property 'id' of type 'number' is not assignable to 'string' index type 'string'.ts(2411)” if part of the object key is indexed with type and value of string and you declare another key of type number. You might think there is a bug with the type safety but I will recommend you learn something about union-type and index-signature first for clear understanding.
type Student2 = {
[key: string]: string;
name: string;
// ⛔️ Error: Property 'id' of type 'number' is
// not assignable to 'string' index type 'string'.ts(2411)
id: number;
};Check also, How to solve git error: failed to to push some ref to remote origin
Summary: Property does not exist on type Object
To fix the error “Property does not exist on type ‘{}'” in Typescript and when working with node, remember to access only object keys that exist. If there is a particular key that does not exist in your object, you have to explicitly add it to avoid this error. Take your time and read the above guide and get the whole concept right so that you will know how to deal with this type of bug whenever you’re presented with one.
Thanks for reading and if you have any suggestions or challenges applying above guide, let me know.
