TypeScript Readonly Utility type

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 go over 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 of the existing properties to be a new value.

And we don't always want that.

So in order 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.

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

Comments

[Athif binu]

Tanks

[Chris Bongers]

Glad you enjoyed it 🙌

[Athif binu]

ya sir its good tanks for the for the valuable information.
sir iam fresher in developer i want to your valuable mentoring support Tanks.

[Athif binu]

Tanks sir i want to your valuable Mentoring support .

[Florian Spier]

Does ReadOnly prevent mutating a nested object?

E.g. if User had an Address object, is it still possible to mutate the address?

[Chris Bongers]

Yes, but you can create a deepReadOnly like described in this PR:
github.com/Microsoft/TypeScript/pu...

Might actually write it out as well