Understanding Readonly Arrays in TypeScript

One of the features offered by TypeScript is the readonly modifier, which is utilized to make properties unchangeable. The modifier makes it possible to declare a readonly array. Unlike other options like const[], immutable[], or fixed[], readonly[] is the correct way to declare an array in TypeScript that you don't want to be modified.

To illustrate this, consider the example below:

readonly number[] = [1, 2, 3];

In the above example, we have an array of numbers that cannot be modified because it has been declared as a readonly array.

The readonly modifier is extremely beneficial when dealing with arrays that need to keep their initial values. This prevents accidental modifications. Also, when other developers or users look at your code, this communicates to them that these values should not, and cannot, be changed.

However, it's important to understand that readonly arrays are only shallowly immutable. This means that if your readonly array contains objects, the properties of these objects can still be altered. To make nested objects immutable, you would have to make those objects readonly as well.

Let's look at an example:

readonly Object[] = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 }
];

Even though our array is declared as readonly, the properties within the objects in the array are still mutable. So, if we want to ensure that the objects within the array are also immutable, we would declare them as readonly:

readonly { readonly name: string, readonly age: number }[] = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 }
];

In conclusion, TypeScript provides a feature, readonly, that makes the declaration of immutable arrays easy and straightforward. It adds an extra layer of security to your data and improves your program's predictability. However, remember that readonly only provides shallow immutability, and for nested objects within the array, readonly has to be used for each object to make it fully immutable.