Cannot assign to 'X' because it is a read-only property (TS)

# Cannot assign to 'X' because it is a read-only property (TS)

The error "Cannot assign to 'X' because it is a read-only property" occurs when we try to change the value of a read-only property in a class or an object.

To solve the error, remove the readonly modifier or use a type assertion to change the value of the property.

Here is an example of how the error occurs when using classes.

index.ts

Copied!
// 👇️ with classes
class Employee {
  readonly country: string = 'Germany';

  changeCountry() {
    // ⛔️ Error: Cannot assign to 'country' because it is a read-only property.ts(2540)
    this.country = 'Chile';
  }
}

cannot assign to because it is read only property

And here is an example of how the error occurs when using objects.

index.ts

Copied!
// 👇️ with objects
type Person = {
  readonly name: string;
};

const obj: Person = {
  name: 'Bobby Hadz',
};

// ⛔️ Error: Cannot assign to 'name' because it is a read-only property.ts(2540)
obj.name = 'Frank';

The examples use the readonly modifier to set the class and object properties to read-only which makes them immutable.

# Remove the `readonly` modifier if you have access to the code

To solve the error, remove the readonly modifier if you have access to the code where it's set.

index.ts

Copied!
class Employee {
  country = 'Germany';

  changeCountry() {
    this.country = 'Chile';
  }
}

// ------------------------------------

type Person = {
  name: string;
};

const obj: Person = {
  name: 'Bobby Hadz',
};

obj.name = 'Frank';

remove readonly modifier if you have access to the code

The code for this article is available on GitHub

# Using a type assertion to solve the error

If you can't remove the readonly modifier but need to change the value of the readonly property, you can use a type assertion.

index.ts

Copied!
class Employee {
  readonly country: string = 'Germany';

  changeCountry() {
    (this.country as any) = 'Chile';
  }
}

// ------------------------------------

type Person = {
  readonly name: string;
};

const obj: Person = {
  name: 'Bobby Hadz',
};

(obj.name as any) = 'Frank';

using type assertion to solve the error

The code for this article is available on GitHub

We used type assertions to cast the read-only properties to any, to be able to change their values.

You can also be more specific and cast the readonly property to the type of the value in the assignment.

index.ts

Copied!
class Employee {
  readonly country: string = 'Germany';

  changeCountry() {
    (this.country as string) = 'Chile';
  }
}

type Person = {
  readonly name: string;
};

const obj: Person = {
  name: 'Bobby hadz',
};

(obj.name as string) = 'Frank';

In some cases, the error occurs when you work with a third-party library and try to mutate an immutable state object.

If that's the situation you're in, there is most likely a method, that the library exports, which is used to mutate its state and it shouldn't be done directly by changing the state object.

I've also written a detailed article on how to change a readonly property to mutable.

# Using protected class properties

If you need a class property that cannot be changed from the outside, and can only be changed from within the class, set the property to protected and use a getter.

index.ts

Copied!
class Employee {
  protected _country = 'Germany';

  get country(): string {
    return this._country;
  }

  changeCountry() {
    this._country = 'Chile';
  }
}

const employee = new Employee();

console.log(employee.country); // 👉️ "Germany"

// ⛔️ Cannot assign to 'country' because it is a read-only property.ts(2540)
employee.country = 'Belgium';

The code for this article is available on GitHub

Protected class properties can only be accessed from within the class and subclasses of the class.

That's why we added a getter that allows access from outside the class.

Users cannot directly change the _country property from the outside but they could call the changeCountry method and set it to a specific property.

You could also mark the changeCountry method as protected or change the _country property from the class's constructor method. How you implement this depends on your use case.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Cannot assign to 'X' because it is a read-only property (TS)