Subscribe

TypeScript Readonly Utility type

✍️

How to make a interface or type readonly in TypeScript

22 Feb, 2022 · 2 min read

This is the last of the commonly known interface modifying utility types. Do note there are a few more, but we'll get to those in a later stage as they are a bit more advanced.

I want to review the Readonly utility type in this article.

Using the read-only type, you can transform a type to be read-only, making it impossible to change after the initial assignment.

Using the Readonly Utility type

Let's retake this user interface.

interface User {
  id?: number;
  firstname: string;
  lastname: string;
  age?: number;
}

If we would now assign some information to this object, we could always re-assign it later in our code.

const user: User = {
  firstname: 'Chris',
  lastname: 'Bongers',
};
user.id = 123;

We can now modify any existing properties to be a new value.

And we don't always want that.

So to prevent this from happening, you can wrap the type used in a Readonly type like so:

const user: Readonly<User> = {
  firstname: 'Chris',
  lastname: 'Bongers',
};

Which will give us the following TypeScript error.

TypeScript readonly type

This Readonly type can be super helpful to represent frozen objects. Or objects that should not mutate on their own.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

The Record Utility Type in TypeScript

12 Mar, 2022 · 3 min read

The Record Utility Type in TypeScript

TypeScript Union type a deeper look

11 Mar, 2022 · 3 min read

TypeScript Union type a deeper look

Join 1828 devs and subscribe to my newsletter