Readonly utility type in Typescript - Step-by-Step Execution

Concept Flow - Readonly utility type

Define original object

↓

Apply Readonly<T>

↓

Create new readonly object

↓

Try to modify property

↓

Error: Cannot assign to readonly property

↓

Use readonly object safely

The Readonly utility type takes an object type and makes all its properties read-only, preventing modification.

Execution Sample

Typescript

interface Person {
  name: string;
  age: number;
}

const person: Readonly<Person> = { name: "Alice", age: 30 };
person.age = 31; // Error

This code creates a readonly person object and shows that modifying its properties causes a TypeScript error.

Execution Table

Step	Action	Evaluation	Result
1	Define interface Person	Person has name:string and age:number	Person type ready
2	Create person as Readonly<Person>	person = { name: 'Alice', age: 30 }	person object created, all properties readonly
3	Attempt to assign person.age = 31	Check if age is writable	Error: Cannot assign to 'age' because it is a read-only property
4	Use person properties without modification	Access person.name and person.age	Values read successfully: 'Alice', 30

💡 Execution stops at step 3 due to TypeScript compile-time error preventing property modification

Variable Tracker

Variable	Start	After 1	After 2	Final
person	undefined	undefined	{ name: 'Alice', age: 30 } (readonly)	{ name: 'Alice', age: 30 } (readonly)

Key Moments - 2 Insights

Why can't I change the age property of person after using Readonly<Person>?

Readonly<Person> makes all properties read-only, so TypeScript prevents any assignment to them, as shown in step 3 of the execution_table.

Does Readonly<Person> change the original Person interface?

No, it creates a new type with all properties readonly but leaves the original Person interface unchanged, as seen in step 1 and 2.

Visual Quiz - 3 Questions

Look at the execution_table, what happens at step 3 when trying to assign person.age = 31?

A The assignment succeeds and age becomes 31

B The property age is deleted

C TypeScript error: Cannot assign to 'age' because it is read-only

D The code runs but logs a warning

💡 Hint

Check the 'Result' column in step 3 of the execution_table

According to variable_tracker, what is the value of person after step 2?

A An object with readonly properties: { name: 'Alice', age: 30 }

B An object with writable properties

C undefined

D null

💡 Hint

Look at the 'After 2' column for variable 'person' in variable_tracker

If we remove Readonly from the person declaration, how would step 3 change in the execution_table?

A Step 3 would still show an error

B Step 3 would allow assignment and update age to 31

C Step 3 would delete the person object

D Step 3 would cause a runtime exception

💡 Hint

Readonly prevents assignment errors; removing it allows property changes (see step 3 behavior)

Concept Snapshot

Readonly<T> creates a new type from T where all properties are read-only.
Syntax: Readonly<Type>
Prevents modification of properties at compile time.
Useful to protect objects from accidental changes.
Does not affect runtime, only TypeScript checks.

Full Transcript

The Readonly utility type in TypeScript takes an object type and makes all its properties read-only. This means you cannot change any property after the object is created. In the example, we define a Person interface with name and age. Then we create a person object using Readonly<Person>. Trying to assign a new value to person.age causes a TypeScript error, preventing modification. The original Person interface remains unchanged. This helps keep objects safe from accidental changes during development.