Cannot Assign To Read Only Property Of Object In TypeScript

Posted on by Christopher
Cannot assign to read only property of Object in TypeScript

You easily encounter the error “Cannot assign to read only property of object” in TypeScript when trying to change the value of a read-only property. The way to work around this error is to set the properties to ‘writable‘ or make a copy of the object/array. 

Cause of the error “Cannot assign to read only property of object” in TypeScript

When an object/array is frozen, then you access its properties and assign them a new value. You will get the error message: Cannot assign to read only property of Object in TypeScript.

Or errors can also occur when you use the Object.defineProperties() method to declare properties for an object. If we don’t define the ‘writable‘ property as ‘true‘, then we cannot change the value of the properties.

To make it easier to visualize, let me reproduce the error:

First example:

const student = {
    name: "Kevin Hart",
    id: "20228888",
};
  
Object.freeze(student); // Frozen Object  

// Change the value of the id property
student.id = "20225865"; 
  
const members: string[] = ["Kai", "Bruce", "Liam", "Adam", "Dave"];  
Object.freeze(members); // Frozen Array

// Change the value of the second element
members[1] = "Bryan";

Error:

Cannot assign to read only property 'id' of object '#<Object>'

In this example, we use the method Object.freeze. So the properties inside the object will not be changed

Second example:

const company: { name?: string; foundedYear?: number } = {};

// Using Object.defineProperties()
Object.defineProperties(company, {
    name: {
        value: "Tesla",
        writable: true,
    },
    foundedYear: {
        value: "2003",
    },
});

company.name = "Amazon";
company.foundedYear = 1994;

Error:

Cannot assign to read only property 'foundedYear' of object '#<Object>'

For the second example, we use the Object.defineProperties() method to define properties for the object. In that property, foundedYear has no property ‘writable‘, so we cannot change its value.

How to resolve this problem?

To fix this problem, we introduce you to the following two methods, corresponding to each case where the error occurs.

Create a copy of the object/array

Once you have frozen an object or an array, you will not be able to make changes to that object/array. However, we can still make changes to their copy.

To do this, we use the spread syntax(…) to create a copy of the object/array. We are now allowed to make changes to the properties.

Here is an example:

const student = {
    name: "Kevin Hart",
    id: "20228888",
};
  
Object.freeze(student); // Frozen Object
  
// Create a copy of student object
const copyStudent = { ...student }; 

// Change the value of the id property
copyStudent.id = "20225865";
  
console.log("Updated student id: " + copyStudent.id);  
const members: string[] = ["Kai", "Bruce", "Liam", "Adam", "Dave"];  
Object.freeze(members); // Frozen Array
  
// Create a copy of members object
const copyMembers = { ...members };
  
copyMembers[1] = "Bryan"; 
console.log("Updated 2nd member: " + copyMembers[1]);

Output:

"Updated student id: 20225865"
"Updated 2nd member: Bryan"

Set the properties as ‘writable’

When you use the Object.defineProperties() method, to be able to change the value of the property, make sure that the ‘writable‘ property is declared with the value ‘true‘.

If you do not declare the ‘writable‘ property, it will be implicitly ‘false‘. In other words, the property will then be considered read-only.

Take a look at this example:

const company: { name?: string; foundedYear?: number } = {};

// Using Object.defineProperties() method
Object.defineProperties(company, {
    name: {
        value: "Tesla",
        writable: true,
    },
    foundedYear: {
        value: "2003",
        writable: true, // Set 'writable' property to true
    },
});

// Change the value of the name property
company.name = "Amazon";

// Change the value of the foundedYear property
company.foundedYear = 1994;

console.log(
    "Updated company information: " + company.name + ", " + company.foundedYear
);

Output:

"Updated company information: Amazon, 1994" 

Summary

In conclusion, you will definitely get the error “Cannot assign to read only property of Object” in TypeScript if you try changing the value of a read-only property. The best way to fix this error is to make a copy of the object/array. Or you can also set the property to ‘writable’. We hope this article is helpful to you. Thanks for reading.

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *