How To Use Readonly Arrays In TypeScript?

Readonly arrays can help you write more predictable and bug-free code by preventing unintended modifications. In this tutorial, I will explain how to use readonly arrays in TypeScript, providing detailed examples. As a TypeScript developer, you should know how to use readonly arrays in TypeScript.

Table of Contents

Why Use Readonly Arrays in TypeScript?

Readonly arrays in TypeScript are used to maintain data integrity. When you declare an array as readonly, you ensure that its contents cannot be altered after initialization. This can prevent bugs arising from accidental mutations, making your code more robust and easier to reason.

Let me explain an example.

Suppose you are developing a web application for a travel agency in the USA. You have a list of popular destinations that should not change during the runtime of your application. Using a readonly array can help you enforce this immutability.

Create Readonly Arrays in TypeScript

There are two primary ways to create readonly arrays in TypeScript:

Using the ReadonlyArray<T> type.
Using the readonly modifier with array types.

Using ReadonlyArray<T>

The ReadonlyArray<T> type is a built-in utility type in TypeScript that makes an array immutable. Here’s how you can use it:

const popularDestinations: ReadonlyArray<string> = [
  "New York",
  "Los Angeles",
  "Chicago",
  "Houston",
  "Phoenix"
];

// This will cause a TypeScript error
// popularDestinations.push("San Francisco");

In this example, popularDestinations is a readonly array of strings. Any attempt to modify the array, such as adding a new destination, will result in a TypeScript error.

You can see the exact output in the screenshot below:

Read Remove Duplicates from an Array in TypeScript

Using the readonly Modifier

You can also use the readonly modifier directly with array types to achieve the same effect:

const popularDestinations: readonly string[] = [
  "New York",
  "Los Angeles",
  "Chicago",
  "Houston",
  "Phoenix"
];

// This will cause a TypeScript error
// popularDestinations[0] = "San Francisco";

Both approaches ensure that the array cannot be modified after it is created.

Check out Non-Empty Arrays in TypeScript

Benefits of Readonly Arrays in TypeScript

Readonly arrays offer several benefits that make them a valuable addition to your TypeScript toolkit:

Preventing Unintended Modifications

Readonly arrays help prevent accidental changes to your data. For instance, if you pass a readonly array to a function, you can be confident that the function will not alter the array.

Enhancing Code Readability

By using readonly arrays in TypeScript, you make your intentions clear to other developers. They can quickly understand that the array should not be modified, which improves code readability and maintainability.

Enforcing Immutability

Readonly arrays enforce immutability at the type level, which can lead to fewer bugs and more predictable code. This is particularly useful in functional programming paradigms where immutability is a core principle.

Read How to Check Array Equality in TypeScript?

TypeScript Readonly Arrays Examples

Let me show you some practical examples of using readonly arrays in a TypeScript application.

Example 1: Immutable Configuration Settings

Suppose you have a configuration object that should not change during the runtime of your application. You can use readonly arrays to enforce this immutability.

interface AppConfig {
  readonly apiEndpoints: ReadonlyArray<string>;
  readonly supportedLanguages: readonly string[];
}

const config: AppConfig = {
  apiEndpoints: ["https://api.example.com", "https://api.backup.com"],
  supportedLanguages: ["en", "es", "fr"]
};

// This will cause a TypeScript error
// config.apiEndpoints.push("https://api.newendpoint.com");

Example 2: Immutable Data Structures

Consider a scenario where you have a list of states in the USA that should not be modified. You can use readonly arrays to enforce this constraint.

const states: ReadonlyArray<string> = [
  "Alabama",
  "Alaska",
  "Arizona",
  "Arkansas",
  "California"
];

// This will cause a TypeScript error
// states[0] = "New York";

Example 3: Passing Readonly Arrays to Functions

When passing arrays to functions, you can use readonly arrays to ensure that the function does not modify the array.

function printDestinations(destinations: ReadonlyArray<string>): void {
  destinations.forEach(destination => console.log(destination));
}

const destinations = ["Miami", "Orlando", "Tampa"];
printDestinations(destinations);

// This will cause a TypeScript error
// destinations.push("Jacksonville");

Read How to Split an Array in TypeScript?

Common Pitfalls and How to Avoid Them

While readonly arrays are powerful, there are some common pitfalls you should be aware of:

Misunderstanding Immutability

Readonly arrays prevent modifications to the array itself, but they do not make the elements immutable. If your array contains objects, the objects can still be modified.

interface Destination {
  name: string;
  visited: boolean;
}

const destinations: ReadonlyArray<Destination> = [
  { name: "New York", visited: true },
  { name: "Los Angeles", visited: false }
];

// This is allowed and will not cause a TypeScript error
destinations[0].visited = false;

To enforce immutability of the elements, you need to use readonly properties within the objects themselves.

Performance Considerations While using Readonly Arrays

Readonly arrays can have performance implications if used excessively in performance-critical code. However, in most applications, the benefits of immutability outweigh the performance costs.

Conclusion

Readonly arrays in TypeScript are a useful feature that can help you write more predictable and bug-free code. By preventing unintended modifications, enhancing code readability, and enforcing immutability, readonly arrays can significantly improve the quality of your TypeScript applications.

In this tutorial, I explained how to work with readonly arrays in TypeScript with examples.

How to Use Readonly Arrays in TypeScript?