How to modify ReadOnly values?

Question

I have this value fetchOptions: Readonly<HttpFetchOptionsWithPath> and I'd like to overwrite one of its properties. I've tried the following:

((fetchOptions as Writable<HttpFetchOptionsWithPath>).headers as Writable<any>) = {
    'new-value': '123',
    ...(fetchOptions.headers || {}),
  };

but still get an TypeError: Cannot assign to read only property 'headers' of object '#<Request>' error.

The js code that gets executed looks like this:

fetchOptions.headers = __assign({ 'new-value': '123' }, (fetchOptions.headers || {}));

Any ideas what I'm doing wrong here?

Please if you could provide more code snippets I could help more anyway I answered based on what available in the question. hope it helps! — Hussein Akar
– Hussein Akar, Commented May 20, 2020 at 18:58

Hussein Akar · Accepted Answer · 2022-10-04 10:41:45Z

6

You can't modify the read-only values.. what you can do is cloning these object into new instance and continue using the new instance ...

Object.assign(newVariable, JSON.parse(JSON.stringify(oldVariable)));

This also will do the job:

const newVariable={...oldVariable, propertyToModify:value}

answered May 20, 2020 at 18:57

Hussein Akar

4453 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Actually this answer is not incorrect but when the value of the property is a function this statement will not function well

Shahbaz · Accepted Answer · 2022-08-23 06:10:20Z

1

With this statement you can copy and overwrite properties

var obj={...originalObj,[readOnlyProp:value]}

answered Aug 23, 2022 at 6:10

Shahbaz

1787 bronze badges