ReactJs/Typescript: Make component state object and properties readonly

Question

I have a third party class object and I want to make the properties of the object readonly. So I can not mutate the state with this.state.object.props = "xx" ;

It looks like this

class ThirdPartyObject {
    id?: string;
}

interface ComponentState {
    readonly object: ThirdPartyObject;
}

this.state.object = null; // not possible
this.state.object.id = "newId"; // should also not be possible

How can I do that?

Answer 1

If you want ThirdPartyObject fields to be readonly use Readonly type like:

class ThirdPartyObject {
  id?: string;
}

interface ComponentState {
  readonly object: Readonly<ThirdPartyObject>;
}

Then this: this.state.object.id = 'newId'; would throw an error.