how to remove the readonly flag in typescript
Tags: typescript, howto
Published: 2022-05-17 11:29:02

---
title: how to remove the readonly flag in typescript
published: true
description: 
tags: #typescript #howto
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulbccn03u32k4qlym0e0.png
---
you've seen this types and interface or even classes that have a `readonly` modifier 👇 

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

type Meme = {
  readonly funny: boolean;
}
```

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

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ipmxokxe9b4jc485vr8z.png)
```ts
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";
```
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](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html#improved-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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7lkgzyqu2wueoafqwdy5.png)
```ts
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";

```
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 👇

```ts
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;

```

Hope it was useful. 🤗 

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