readonly Keyword in Typescript

Do you want to know about the readonly keyword in Typescript? In this Typescript tutorial, I will explain how to use the readonly keyword in Typescript.

The readonly keyword in TypeScript is used to make properties of a class or interface immutable, meaning once assigned a value, these properties cannot be changed. This enhances code stability by ensuring that certain values remain constant throughout the lifecycle of an object.

Typescript readonly keyword

In TypeScript, the readonly keyword is used to make properties of a class or an interface immutable. This means a property cannot be changed once a value is assigned. This is particularly useful for ensuring your data’s integrity throughout an object’s lifecycle.

How to use readonly Keyword in Typescript

Now, let us see how to use the readonly keyword in Typescript with a few examples.

How to use readonly keyword in Typescript class

Now, let us see how to use the readonly keyword in a class in Typescript. Here is a simple example of how readonly can be used in a class in Typescript.

class User {
    readonly id: number;
    name: string;

    constructor(id: number, name: string) {
        this.id = id;
        this.name = name;
    }
}

const user = new User(1, 'John Doe');
console.log(user.id); // Output: 1
user.id = 2; // Error: Cannot assign to 'id' because it is a read-only property.

In this example, the id property of the User class is marked as readonly. Once a User object is created, its id property cannot be changed.

See also  as Keyword in Typescript

Once you run the code using Visual Studio Code, it will show an error like below in the screenshot.

error TS2540: Cannot assign to ‘id’ because it is a read-only property.

typescript readonly keyword

How to use readonly keyword in Interfaces in Typescript

The readonly keyword can also be used in interfaces in Typescript. This is particularly useful when defining a shape of data that should not be modified.

Here is the complete code:

interface Point {
    readonly x: number;
    readonly y: number;
}

let p: Point = { x: 10, y: 20 };
console.log(p.x); // Output: 10
p.x = 5; // Error: Cannot assign to 'x' because it is a read-only property.

How to use the readonly keyword in Typescript Arrays

We can also use the readonly keyword in Typescript arrays. It can prevent the modification of arrays after their initial creation.

Here is the complete code:

class Example {
    readonly numbers: readonly number[] = [1, 2, 3];
}

const example = new Example();
console.log(example.numbers); // Output: [1, 2, 3]
example.numbers.push(4);

Once you run the code using VS code, the output will appear like below:

error TS2339: Property ‘push’ does not exist on type ‘readonly number[]’.

Check out the screenshot below:

readonly Keyword in Typescript

readonly vs const in Typescript

It’s important to differentiate between readonly and const in Typescript. The const keyword is used to declare variables that cannot be reassigned, whereas readonly is used in the context of properties in classes and interfaces.

Here is an example:

const a = 10;
a = 20; // Error: Assignment to constant variable.

class Example {
    readonly b = 10;
}

const example = new Example();
example.b = 20; // Error: Cannot assign to 'b' because it is a read-only property.

Conclusion

The readonly keyword in TypeScript is a very helpful keyword and ensures the immutability of properties in classes and interfaces. I hope you know how to use the readonly keyword in Typescript in classes, interfaces, and arrays. I also explained the difference between readonly vs. const in Typescript.

See also  How to create date from year month day in Typescript?

You may also like:

>