How to convert an object to a read-only or a constant object in TypeScript?
Tags: typescript
Published: 2021-11-06 00:00:00

---
  title: How to convert an object to a read-only or a constant object in TypeScript?
  published: true
  tags: TypeScript
  date: Sat Nov 06 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/convert-object-to-readonly-or-constant-object-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-d3d4fd2b523c3be9b063f94b1935039c.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/convert-object-to-readonly-or-constant-object-typescript)
  
To convert an entire object to a read-only or a constant object, you can use the `as` keyword after the object initialization followed by the keyword `const` in TypeScript.

### TL;DR

```ts
// using "as" keyword after the person
// object initialisation followed by the keyword "const"
// to make the object readonly or a constant object
const person = {
  name: "John Doe",
  age: 23,
} as const;

// change the "name" property value
person.name = "Hello"; // ❌ not allowed. Cannot assign to 'name' because it is a read-only property.
```

For example, let' say we have an object called `person` with 2 properties called `name` and `age` having values of `John Doe` and `23` respectively like this,

```ts
// a simple object
const person = {
  name: "John Doe",
  age: 23,
};
```

Now if hover over the `person` object variable, you can see that the TypeScript assumed the types of the `name` and `age` properties to be `string` and `number` like in the below image,

![generic types of string and number for properties shown when hovering over the person variable object](https://melvingeorge.me/_next/static/images/generic-types-shown-person-hover-0ac8aa416013b82664b74a2ee91986d1.png)

This is fine.

But in some cases, we may need to convert an entire object into a `readonly` or a `constant` object to avoid changing values of the properties in the object for security reasons.

To do that we can write the `as` keyword after the `person` object initialization followed by the keyword `const` like this,

```ts
// using "as" keyword after the person
// object initialization followed by the keyword "const"
// to make the object readonly or a constant object
const person = {
  name: "John Doe",
  age: 23,
} as const;
```

If we hover over the `person` object now we can see that all the properties inside the `person` object have the word `readonly` shown to the left of each property which is telling us that all the properties can now be read but not changed.

It may look like this,

![all properties inside the person object having readonly word shown to the left of each property](https://melvingeorge.me/_next/static/images/all-properties-readonly-show-person-object-bb6305d61b14f6094a28d75bd46250c5.png)

Now let's try to change the value of the `name` property from the `person` object like this,

```ts
// using "as" keyword after the person
// object initialization followed by the keyword "const"
// to make the object readonly or a constant object
const person = {
  name: "John Doe",
  age: 23,
} as const;

// change the "name" property value
person.name = "Hello"; // ❌ not allowed. Cannot assign to 'name' because it is a read-only property.
```

As you can see from the above code that the TypeScript compiler will not allow changing the value of the `name` property and shows an error saying `Cannot assign to 'name' because it is a read-only property.` which is exactly what we want to happen.

See the above code live in [codesandbox](https://codesandbox.io/s/convert-object-to-readonly-or-constant-object-typescript-7zwot?file=/src/index.ts).

That's all 😃!

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

---