How to make mutable object type from readonly object type keys in TypeScript?

Published February 7, 2022

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.

TL;DR

// 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,

// 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 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,

// 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 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,

// 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.

That's all 😃!

Feel free to share if you found this useful 😃.


Share on: Facebook Twitter