Transfer. Original link .

In Typescript 2.0 , the readonly modifier has been added. Properties marked with the readonly modifier can be assigned a value only at the time of initialization, or in the constructor of the same class. Any other assignment to the value is prohibited.

Let's look at an example. Here is a simple Point type, described by two read-only properties:

 type Point = { readonly x: number; readonly y: number; }; 

Now we can create an object representing the origin, and initialize x and y with a value of 0 :

 const origin: Point = { x: 0, y: 0 }; 

However, since the x and y properties are readonly marked, we cannot change their values ​​afterwards:

 // Error: Left-hand side of assignment expression // cannot be a constant or read-only property origin.x = 100; 

More realistic example

The above example may seem far-fetched, let's consider the following function:

 function moveX(point: Point, offset: number): Point { point.x += offset; return point; } 

The moveX function moveX not change the x property of the passed point object. The TypeScript compiler will surely start swearing if you try to do this, since the property is marked with the readonly modifier. Instead, moveX should return a new object with modified values:

 function moveX(p: Point, offset: number): Point { return { x: px + offset, y: py }; } 

Now the compiler will be happy, there are no more attempts to assign values ​​to properties marked readonly . We created a new object that is initialized with updated values.

Read-only class properties

You can also apply the readonly modifier to the properties described in the class. Here is the Circle class with the readonly field radius and the area property, which indirectly implements read-only access because it does not have a setter:

 class Circle { readonly radius: number; constructor(radius: number) { this.radius = radius; } get area() { return Math.PI * this.radius ** 2; } } 

Note that area calculated using the exponentiation operator . Both radius and area are accessible from outside the class for reading, because none is marked as private , but not for writing:

 const unitCircle = new Circle(1); unitCircle.radius; // 1 unitCircle.area; // 3.141592653589793 // Error: Left-hand side of assignment expression // cannot be a constant or read-only property unitCircle.radius = 42; // Error: Left-hand side of assignment expression // cannot be a constant or read-only property unitCircle.area = 42; 

Only readable interface fields

Interface fields can also be marked as read-only. For example, the ReadOnlyArray<T> prevents values ​​from being written to the described properties:

 interface ReadonlyArray<T> { readonly length: number; // ... readonly [n: number]: T; } 

The following assignment will be invalid:

 const primesBelow10: ReadonlyArray<number> = [2, 3, 5, 7]; // Error: Left-hand side of assignment expression // cannot be a constant or read-only property primesBelow10[4] = 11; 

readonly vs

The readonly modifier is part of the TypeScript type system. It is used only by the compiler to check for illegal assignment of values. As soon as TypeScript code is compiled into JavaScript such a thing as readonly goes away. Do not be lazy to play with a small example to see what properties are read-only compiled.

Since the readonly modifier is only an artifact during compilation, it is not a protection against assigning values ​​during code execution. However, this is another TypeScript feature that will help you write the correct code, leaving the compiler to work on checking unintended value assignments.