How to use the readonly keyword in TypeScript?

We will learn to use the readonly keyword in TypeScript. The readonly keyword allows developers to make class properties and members read-only, and we can’t edit the value of the read-only properties.

It works the same as the const keyword, but the const keyword is used for the variables, and the readonly keyword is used with the class member properties. Also, we can’t assign the values to the const variables after initializing them. Still, we can assign the values to the read-only properties inside the class constructor, and we can’t modify them after assigning them once.

Syntax

Users can follow the syntax below to use the readonly keyword to make class properties read-only.

class demo {
   readonly prop1: prop1_type;
}  

We have declared the demo class and defined the prop1 property in the above syntax. Also, we have used the readonly keyword before theprop1. So, anyone can’t modify it outside the class.

In other programming languages, we use the ‘getters’ to get value private class members’ values. However, we can create getters in TypeScript also, which allows us to read the value but not write it.

We will learn how to replace the whole code of the ‘getters’ via single keyword readonly using various examples below.

Example 1

In this example, we created the class containing the read-only property1 member property. Users can see how we have initialized the read-only properties in the constructor function.

After that, we created the object of class1 named object1. Users can see that by taking object1 as a reference, we can get the value of property1, but we can’t assign a new value to property1.

class class1 {
   // creating the read-only property
   readonly property1: number;
   property2: string;

   constructor(value1: number, value2: string) {
      this.property1 = value1;
      this.property2 = value2;
   }
}

let object1 = new class1(10, "TypeScript");
object1.property2 = "TutorialsPoint"; // this is fine as property2 is not read-only

// object1.property1 = 20; // this will generate compilation error as property1 is defined with readonly keyword

console.log("The value of property1 is " + object1.property1);
console.log("The value of property2 is " + object1.property2);

On compiling, it will generate the following JavaScript code −

var class1 = /** @class */ (function () {
   function class1(value1, value2) {
      this.property1 = value1;
      this.property2 = value2;
   }
   return class1;
}());
var object1 = new class1(10, "TypeScript");
object1.property2 = "TutorialsPoint"; // this is fine as property2 is not read-only

// object1.property1 = 20; // this will generate compilation error as property1 is defined with readonly keyword
console.log("The value of property1 is " + object1.property1);
console.log("The value of property2 is " + object1.property2);

Output

The above code will produce the following output −

The value of property1 is 10
The value of property2 is TutorialsPoint

Example 2

In this example, we created the interface name color containing the read-only colorName property. Also, it contains some other properties such as hexcode, etc.

Next, we created the colorObject of type color. Users can see that we can access the value of every property of the colorObject. Also, we can change the value of every property of the colorObject except colorName, as it is readonly in the interface.

interface color {
   readonly colorName: string;
   hexcode: string;
   R: number;
   G: number;
   B: number;
}
let colorObject: color = {
   colorName: "black",
   hexcode: "#000000",
   R: 0,
   G: 0,
   B: 0,
};
colorObject.R = 10;
colorObject.hexcode = "#000001";

// colorObject.colorName = "Blue"; // can't update read-only properties
console.log("The values of colorObject are " + colorObject.colorName);
console.log(colorObject.hexcode);
console.log(colorObject.R);
console.log(colorObject.G);
console.log(colorObject.B);

On compiling, it will generate the following JavaScript code −

var colorObject = {
   colorName: "black",
   hexcode: "#000000",
   R: 0,
   G: 0,
   B: 0
};
colorObject.R = 10;
colorObject.hexcode = "#000001";

// colorObject.colorName = "Blue"; // can't update read-only properties
console.log("The values of colorObject are " + colorObject.colorName);
console.log(colorObject.hexcode);
console.log(colorObject.R);
console.log(colorObject.G);
console.log(colorObject.B);

Output

The above code will produce the following output −

The values of colorObject are black
#000001
10
0
0

Example 3

The below example demonstrates to create a read-only type. We have created the interface as we normally do, but while using it as a type, we have used the ‘Readonly’ keyword to make the type read-only.

Users can observe that the type of wallObj is read-only, so we can’t edit any single property of wallObj after initializing its value for the first time in the object itself.

interface wall {
   wall_id: string;
   color: string;
   size: number;
   tilesSize: number;
}

let wallObj: Readonly<wall> = {
   wall_id: "1212132354656",
   color: "white",
   size: 30,
   tilesSize: 2,
};

// The below updation are not possible as wallObj is read-only

// wallObj.wall_id = "some value";
// wallObj.color = "some color";
// wallObj.size = "some number";
// wallObj.tilesSize = "some number";

// colorObject.colorName = "Blue"; // can't update read-only properties
console.log("The values of wallObjects are ");
console.log(wallObj.wall_id);
console.log(wallObj.color);
console.log(wallObj.size);
console.log(wallObj.tilesSize);

On compiling, it will generate the following JavaScript code −

var wallObj = {
   wall_id: "1212132354656",
   color: "white",
   size: 30,
   tilesSize: 2
};
// The below updation are not possible as wallObj is read-only
// wallObj.wall_id = "some value";
// wallObj.color = "some color";
// wallObj.size = "some number";
// wallObj.tilesSize = "some number";
// colorObject.colorName = "Blue"; // can't update read-only properties
console.log("The values of wallObjects are ");
console.log(wallObj.wall_id);
console.log(wallObj.color);
console.log(wallObj.size);
console.log(wallObj.tilesSize);

Output

The above code will produce the following output −

The values of wallObjects are 
1212132354656
white
30
2

Example 4

In the example below, we have used the readonly keyword with the constructor parameter. We created the student class, which contains some properties, including read-only.

We used the constructor to initialize all class properties, but again, we used the readonly keyword with the constructor parameter to make them read-only.

Users can observe they can’t edit the read-only parameters inside the constructor.

class student {
   readonly student_id: number;
   student_name: string;
   std: number;

   constructor(readonly id: number, name: string, std: number) {
      // id = id + " "; // as id is a read-only property, and we can't edit it
      this.student_id = id;
      name = name + " ";
      this.student_name = name;
      this.std = std;
   }
}

let student1 = new student(23232, "Shubham", 10);

console.log("The id of student is " + student1.student_id);
console.log("The name of the student is " + student1.student_name);

On compiling, it will generate the following JavaScript code −

var student = /** @class */ (function () {
   function student(id, name, std) {
      this.id = id;
      
      // id = id + " "; // as id is a read-only property, and we can't edit it
      this.student_id = id;
      name = name + " ";
      this.student_name = name;
      this.std = std;
   }
   return student;
}());
var student1 = new student(23232, "Shubham", 10);
console.log("The id of student is " + student1.student_id);
console.log("The name of the student is " + student1.student_name);

Output

The above code will produce the following output −

The id of student is 23232
The name of the student is Shubham

We learned to use the readonly keyword and its different use cases. In the first example, we learned to use readonly keywords with class properties. In the second example, we have used the readonly keyword in the interface. Furthermore, we have used the readonly keyword with type in the third example and as a constructor parameter in the last example.