How to make mutable object type from readonly object type keys in TypeScript?
Tags: typescript
Published: 2022-02-07 00:00:00

---
  title: How to make mutable object type from readonly object type keys in TypeScript?
  published: true
  tags: TypeScript
  date: Mon Feb 07 2022 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/make-mutable-object-type-from-readonly-object-type-keys-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-82b9b949503183ddd9beb68f853ff338.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/make-mutable-object-type-from-readonly-object-type-keys-typescript)
  
To make a mutable object type from the `readonly` object type keys, you can use the `-` symbol (minus) followed by the `readonly` modifier [when making a new object type from another object type keys in TypeScript](https://melvingeorge.me/blog/make-object-type-from-another-object-type-keys-typescript).

### TL;DR

```ts
// a `readonly` type
type ReadonlyPerson = {
  readonly name: string;
  readonly age: number;
  readonly isAdmin: boolean;
};

// make a mutable type from the `ReadonlyPerson` type
// using the `-` symbol (minus) followed
// by the `readonly` modifier  when creating
// a new type from another type keys
type MutablePerson = {
  -readonly [Value in keyof ReadonlyPerson]: ReadonlyPerson[Value];
};

/*
The `MutablePerson` type content looks like this,

{
  name: string;
  age: number;
  isAdmin: boolean;
}

*/
```

For example, let's say we have a type called `ReadonlyPerson` where all the properties keys are `readonly` like this,

```ts
// a `readonly` type
type ReadonlyPerson = {
  readonly name: string;
  readonly age: number;
  readonly isAdmin: boolean;
};
```

Now we aim to make a new type with all the properties from the `ReadonlyPerson` type where all the properties should de mutable or can be changed.

To do that we can use the `-` symbol (minus) followed by the `readonly` keyword outside the [Index Signature syntax](https://melvingeorge.me/blog/type-to-use-for-objects-when-properties-are-not-known-ahead-typescript) when creating a new type from the readonly `ReadonlyPerson` type keys. This will let the TypeScript compiler to make the properties from the `ReadonlyPerson` type mutable. The `readonly` keyword in this is called the modifier in TypeScript.

it can be done like this,

```ts
// a `readonly` type
type ReadonlyPerson = {
  readonly name: string;
  readonly age: number;
  readonly isAdmin: boolean;
};

// make a mutable type from the `ReadonlyPerson` type
// using the `-` symbol (minus) followed
// by the `readonly` modifier  when creating
// a new type from another type keys
type MutablePerson = {
  -readonly [Value in keyof ReadonlyPerson]: ReadonlyPerson[Value];
};
```

As you can see from the above code we have used the:

- `-readonly` modifier outside the Index Signature syntax. This will make the properties mutable in the new type. To remember it I read the `-readonly` syntax statement in my head as `remove the readonly modifier for the property`. 😅
- Also, you can see that we have used another syntax like `ReadonlyPerson[Value]` after the `:` symbol (colon). This is a valid syntax in TypeScript called the [`Indexed Access Types`](https://melvingeorge.me/blog/get-property-type-from-another-type-alias-or-interface-typescript) syntax where we can get the type of a particular property. In our case, we are using this to get the current type of property being looped by passing the current `Value` to the `ReadonlyPerson` type.

Now if you hover over the `MutablePerson` (if you are using VScode or TypeScript enabled editor), you can see that all the keys from the `ReadonlyPerson` object are reflected in the `MutablePerson` type where now the properties in it don't have the `readonly` modifier attached to it.

It will look like this,

```ts
// a `readonly` type
type ReadonlyPerson = {
  readonly name: string;
  readonly age: number;
  readonly isAdmin: boolean;
};

// make a mutable type from the `ReadonlyPerson` type
// using the `-` symbol (minus) followed
// by the `readonly` modifier  when creating
// a new type from another type keys
type MutablePerson = {
  -readonly [Value in keyof ReadonlyPerson]: ReadonlyPerson[Value];
};

/*
The `MutablePerson` type content looks like this,

{
  name: string;
  age: number;
  isAdmin: boolean;
}

*/
```

We have successfully made a mutable object type from the `readonly` object type keys in TypeScript. Yay 🥳!

See the above code live in [codesandbox](https://codesandbox.io/s/make-mutable-object-type-from-readonly-object-type-keys-typescript-n8o7ge?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---