TypeScript ReadOnly

Introduction to TypeScript ReadOnly in Typescript

As we know that the typescript readonly property is a property that is used to make a property readonly. The read-only members can be accessed outside the class, but their value cannot be changed, we need to delete all the read-only members inside the class or the interface itself. The readonly keyword simply does not exist in typescript. The readonly keyword is only used during the type-checking phase of the compilation.

Now let us understand the readonly property with the help of an example :

Explanation :

In the above code, we have created a class and defined two properties in it, and made the property named studentname as readonly that is the property in which the readonly is used cannot be initialized later it will be initialized in that class itself, this is why when we were initializing the name again then it will throw an error. Hence we can clearly understand the use of readonly property with the help of this example. Run the above code in your editor for a better and clear explanation.

TypeScript ReadOnly Use Cases

The usage of readonly in typescript are :

A function or the class that declares its parameter won't be modified later.

Explanation :

As we can see in the above code itself that the properties which are declared in the class cannot be modified later if we use the readonly property beside it , it will throw an error if we try to modify it.

The TypeScript programming language provides the readonly modifier keyword which allows us to mark the properties of a class as immutable. The assignment to a readonly property can only occur in one of two places. Let us read about them :

1. Either it can be declared in the property declaration.
2. It can be declared in the constructor of the same class.

How to Create the Read-Only Properties in TypeScript?

The readonly property is created by just adding the word readonly just before the property name. We cannot change the value of the property after we have used the readonly property in the class or function. If we try to assign value to the same property after the declaration of the readonly then it will throw an error.

Let Us Create Objects with Readonly Property

Here it will show an error as we have used the readonly property in the id property, and later we were trying to reassign the value of that id property and hence it will show an error.

Readonly Property in Interface

Now we will see how to use the readonly property in the interface :

Explanation :

Here it will show an error as we have used the readonly property in the id property in the interface, and later we were trying to reassign the value of that id property hence it will show an error.

Readonly Property in Type Alias

Explanation:

Here it will show an error as we have used the readonly property in the id property in the type alias, and later we were trying to reassign the value of that id property hence it will show an error.

Using Class with Readonly Property

We can use the readonly property in the class to , let us understand this with the help of an example :

Here it will show an error as we have used the readonly property in the id property , and later we were trying to reassign the value of that id property hence it will show an error. Run the above code in your editor for a better and clear explanation.

TypeScript Readonly vs. Const

It may seem to us that both the readonly and the const keywords are the same but they are not. Let us learn about the difference between readonly and const keywords in typescript :

• The const keyword's main advantage is that it needs to have the value when we make the declaration. Once we have declared the value for the const variable, we could not change it.

• The const keyword is used for variables while the readonly keyword is used for properties within the members of a class.

  Const keyword :

  It will show an error as we have used the const keyword before hence we cannot redeclare.

  Readonly keyword :

  Here it will show an error as we have only used the readonly property in the id property , and later we were trying to reassign the value of that id property hence it will show an error. Run the above code in your editor for a better and clear explanation.

• We cannot redeclare the const keyword values while we can redeclare the readonly keyword values.

  We can conclude that they both are the same just the difference is that const is for variables & readonly is for class properties.

  The Const keyword in typescript can be applied to variables only while the readonly keyword can be applied to its properties also.

  The const value is initialized during the time of declaration only, while the readonly can be declared without assigned values.

  The const value can not be reassigned, while the readonly can be reassigned.