How to Create Read-Only Types in TypeScript

Read-only types are a handy tool in TypeScript, allowing us to ensure that certain values stay unchanged after their initial assignment. So, let's explore how to create read-only types in TypeScript.

When we say "Read-only", it infers that the property is immutable or cannot be changed after setting.

Creating Simple Read-Only Types

Let's create a simple object and mark its properties as read-only using the readonly modifier.

type SomeReadOnlyType = {
    readonly property1: string;
    readonly property2: number;
}

let obj: SomeReadOnlyType = {
    someProperty: "Hello",
    someOtherNumber: 123
};

// Attempt to update a read-only property:
obj.someProperty = "World"; //  ❌ Error: Cannot assign to 'someProperty' because it is a read-only property.

Both someProperty and someOtherNumber are read-only. If we try to change them after their initial assignment, TypeScript will raise a compile error.

Using the Readonly Utility

TypeScript also provides a utility called Readonly that makes all properties of a type read-only.

It's super handy when you have an existing type and want a read-only version. Or, if using our previous example, we don't want to manually declare that all of the properties are readonly.

Here's how you can use it:

type SomeType = {
    property1: string;
    property2: number;
}

// Make a new read-only type 
type ReadOnlyMyType = Readonly<SomeType>;

let obj: SomeReadOnlyType = {
    someProperty: "Hello",
    someOtherNumber: 123
};

// Attempt to update a read-only property:
obj.someProperty = "World"; //  ❌ Error: Cannot assign to 'someProperty' because it is a read-only property.

Readonly<SomeType> gives us a new type where all properties of SomeType are read-only. Like before, TypeScript throws a compile error if we try to change the property after the initial assignment.

Read-Only Arrays

We can also make arrays read-only with ReadonlyArray<T> or by adding readonly before the array type.

This way, we can't modify the elements of the array.

Check it out:

let arr: ReadonlyArray<number> = [1, 2, 3];
arr[0] = 4; // Error: Index signature in type 'readonly number[]' only permits reading.

// or with readonly
let arr: readonly number[] = [1, 2, 3];

arr[0] = 4; // Error: Index signature in type 'readonly number[]' only permits reading.

A Quick Note on Immutability

readonly, Readonly, and ReadonlyArray constructs do not make objects or arrays immutable.

They merely prevent assignment to the object properties or array elements. Objects and arrays in JavaScript and TypeScript are reference types, so a read-only object can still be changed if another reference isn't read-only.

If this doesn't make sense, I'd recommend reading up a little more about immutability in JavaScript. 😉

Happy Coding!

Follow me on Twitter or connect on LinkedIn.

🚨 Want to make friends and learn from peers? You can join our free web developer community here. 🎉