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?

Answer 1

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}