DEV Community

Cover image for how to remove the readonly flag in typescript
Daniel Codex
Daniel Codex

Posted on

how to remove the readonly flag in typescript

you've seen this types and interface or even classes that have a readonly modifier πŸ‘‡

interface Immutable {
  readonly name: string;
  readonly age: number;
  // so harsh
  readonly alive: boolean;
}

type Meme = {
  readonly funny: boolean;
}
Enter fullscreen mode Exit fullscreen mode
class Test {
  constructor(public readonly name: string, public readonly age: number) {
    this.name = name;
    this.age = age;
  }
}
Enter fullscreen mode Exit fullscreen mode

Now if you define an object according to the shape (or type) of the Immutable interface you can't change the value of the property like your normally would.
Image description

interface Immutable {
  readonly name: string;
  readonly age: number;
  readonly alive: boolean;
}

let person: Immutable = {
  age: 24,
  name: "daniel",
  alive: true // it's a matter of prespective
}

person.name = "Nigel";
Enter fullscreen mode Exit fullscreen mode

And that's what we want, actually this is a normal behavior we want it to be readonly but the challenge is how we can write or better to say change the readonly property.

Here we can use Improve control over mapped type modifiers with help of index access types

Here is how we can remove readonly modifier from the last example.
Image description

interface Immutable {
  readonly name: string;
  readonly age: number;
  readonly alive: boolean;
}

let person: Immutable = {
  age: 24,
  name: "daniel",
  alive: true // it's a matter of prespective
}

person.name = "Nigel";


type Mutable = {
  -readonly [key in keyof Immutable]: Immutable[key];
}

let mut: Mutable = person;
// this is crazy
mut.name = "somethnig else";

Enter fullscreen mode Exit fullscreen mode

As you can see in the picture, we define another type called Mutable.
Then we remove the readonly modifier with the help of -readonly modifier (there is minus there -) from all of the Immutable key with mapped type and keyof operator

Also at the end of line we are adding all of the Immutable types (in this case string, number, boolean) with the help of index access types

So the example is intentional and i don't think somebody need at first to create an object with the shape of the Immutable which in this case is perons object then again add that to the new variable mut with the Mutable type.

But it shows that the Mutable type will indeed remove the readonly type. It's really cool 🀩

Also you can do the same thing with class. here is an example πŸ‘‡

class Test {
  constructor(public readonly name: string, public readonly age: number) {
    this.name = name;
    this.age = age;
  }
}

let newTest = new Test("daniel", 23);
newTest.name = "something" // not possible
newTest.age = 100; // also not possible

type RemoveReadonly = {
  -readonly [key in keyof Test]: Test[key];
}

let removeReadonly: RemoveReadonly = newTest;
removeReadonly.name = "now i can do that";
removeReadonly.age = 100;

Enter fullscreen mode Exit fullscreen mode

Hope it was useful. πŸ€—

original post: https://danielcodex.com/2022/05/17/how-to-remove-the-readonly-modifier-in-typescript/

Discussion (0)