TypeScript Academy · Lesson

Readonly Arrays and Immutable Data

Use ReadonlyArray to prevent accidental mutations.

Readonly Arrays and Immutable Data is a free TypeScript Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

Mutable arrays can be accidentally modified anywhere in your code. TypeScript's ReadonlyArray and readonly modifier help you enforce immutability.

The readonly Modifier on Arrays

Add the `readonly` modifier before the array type to prevent mutation. The array can be read but not changed.

const ids: readonly number[] = [1, 2, 3];
// ids.push(4);   // Error
// ids[0] = 99;   // Error
console.log(ids[0]); // OK — reading is fine

ReadonlyArray<T> Generic Form

`ReadonlyArray` is the generic equivalent of `readonly T[]`. Both prevent push, pop, splice, and index assignment.

const names: ReadonlyArray<string> = ['Alice', 'Bob'];
// names.push('Charlie'); // Error

Returning Readonly Arrays from Functions

Return readonly arrays from functions to signal to callers that the result should not be mutated.

function getConfig(): readonly string[] {
  return ['host', 'port', 'db'];
}

Immutable Function Parameters

Mark array parameters as readonly to prevent the function from mutating the caller's array.

function sum(nums: readonly number[]): number {
  return nums.reduce((a, b) => a + b, 0);
  // nums.push(99); // Error inside function
}

as const for Literal Arrays

The `as const` assertion makes an array readonly and infers a tuple type with literal element types instead of widened types.

const colors = ['red', 'green', 'blue'] as const;
// type: readonly ['red', 'green', 'blue']
// colors.push('yellow'); // Error

Readonly Does Not Deep-Freeze

readonly only prevents the array reference from being mutated. If the elements are objects, their properties can still be changed.

const users: readonly { name: string }[] = [{ name: 'Alice' }];
// users.push({}); // Error
users[0].name = 'Bob'; // Allowed — object itself is mutable

Deeply Immutable with Readonly<T>

For deep immutability of objects, combine ReadonlyArray with Readonly on the elements. Or use a library like immer.

type ImmutableUser = Readonly<{ name: string; scores: readonly number[] }>;
const u: ImmutableUser = { name: 'Alice', scores: [90, 85] };
// u.name = 'Bob';       // Error
// u.scores.push(100);  // Error

Mutable vs Readonly Assignment

A readonly array is NOT assignable to a mutable array type. This protects against accidentally passing an immutable array where mutation is expected.

const ro: readonly number[] = [1, 2];
const mutable: number[] = ro; // Error!

When to Use Readonly Arrays

Use readonly arrays for configuration objects, constants, function parameters you promise not to mutate, and return values from pure functions.

Spreading Creates a New Mutable Array

Spreading a readonly array into a new array literal creates a mutable copy. This is a clean pattern for making changes without mutation.

const base: readonly number[] = [1, 2, 3];
const extended: number[] = [...base, 4]; // new mutable array

Quick Check

Which operation is NOT allowed on a `readonly number[]` in TypeScript?

Recap

Use `readonly T[]` or `ReadonlyArray` to prevent array mutation. Use `as const` for literal constant arrays. Spreading creates a mutable copy when you need to extend a readonly array.

Frequently asked questions

Is the “Readonly Arrays and Immutable Data” lesson free?

Yes — the full text of “Readonly Arrays and Immutable Data” is free to read here on the web, and the TypeScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Readonly Arrays and Immutable Data”?

Use ReadonlyArray to prevent accidental mutations. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start TypeScript Academy?

No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Readonly Arrays and Immutable Data” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this TypeScript Academy lesson?

Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to TypeScript Academy