How to convert an object to a read-only or a constant object in TypeScript?

Originally posted here!

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

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

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

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,

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

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

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

That's all 😃!

Feel free to share if you found this useful 😃.

---