TypeScript readonly How to use the TypeScript readonly

TypeScript readonly: How to use the TypeScript readonly?

by

What is TypeScript readonly?

The Readonly utility type in TypeScript makes all properties of a type read-only, it simply means we cannot be reassigned after creation.

Syntax:

class MyClass {
    readonly myProperty: MyType;
  
    constructor(myProperty: MyType) {
        this.myProperty = myProperty;
    }
}

Let’s check out the example below:

interface Employee{
  id: number;
  name: string;
  age: number;
}

const employee: Readonly<Employee> = {
  id: 1011011,
  name: "Coding",
  age: 18
};

employee.id = 100001; // Error: Cannot assign to 'id' because it is a read-only property.

As expected, when we try to reassign employee.id, it results in a TypeScript error.

This is because employee is a Readonly, and its properties cannot be reassigned.

How to use the TypeScript readonly?

Here’s a step-by-step guide on how to use the readonly modifier in TypeScript:

Step 1: Understanding readonly:

The readonly keyword in TypeScript is used to make class properties immutable, meaning once they are assigned a value, it cannot be changed.

Step 2: Declaring a Readonly Property

You can declare a readonly property in a class by using the readonly keyword before the property name.

For example:

class Person {
readonly birthDate: Date;
constructor(birthDate: Date) {
this.birthDate = birthDate;
}
}

Step 3: Initializing Readonly Properties

A readonly property must be initialized either at the time of declaration or within the constructor of the same class.

Step 4: Assignment Restrictions

Once a readonly property is assigned a value, attempting to change it will result in a compile-time error.

For example: 

let person = new Person(new Date(1990, 12, 25));
person.birthDate = new Date(1991, 12, 25); // Compile error

Step 5: Readonly vs. const

The readonly keyword is used for class properties, while const is used for variables. readonly properties must be initialized in the declaration or in the constructor, whereas const variables must be initialized at the time of declaration.

Step 6: Using readonly in Interfaces

You can also use readonly in interfaces to ensure that the properties do not get reassigned after their initial assignment.

Step 7: Creating Readonly Types

TypeScript allows you to create readonly types using the Readonly<T> utility type, which makes all properties of a type readonly.

Here’s a practical example of using readonly in a class and an interface:

class Employee {
readonly empCode: number;
empName: string;
constructor(code: number, name: string) {
this.empCode = code;
this.empName = name;
}
}

interface IEmployee {
readonly empCode: number;
empName: string;
}

let empObj: IEmployee = { empCode: 0110, empName: "Itsourcecode" };
// empObj.empCode = 1011011; // Compiler Error: Cannot change readonly 'empCode'

Conclusion

Finally, we’re done exploring the TypeScript readonly that is use to makes all properties of a type read-only, it simply means we cannot be reassigned after creation.

I hope this article has given you some insights and helped you understand the TypeScript Readonly.

If you have any questions or inquiries, please don’t hesitate to leave a comment below.

    Leave a Comment