Readonly properties in interfaces in Typescript - Step-by-Step Execution

Concept Flow - Readonly properties in interfaces

Define interface with readonly property

↓

Create object implementing interface

↓

Try to modify readonly property

↓

Error: Cannot assign

This flow shows defining an interface with a readonly property, creating an object from it, and what happens if you try to change that property.

Execution Sample

Typescript

interface User {
  readonly id: number;
  name: string;
}

const user: User = { id: 1, name: "Alice" };
user.id = 2; // Error here

Defines a User interface with a readonly id, creates a user object, then tries to change the readonly id property, causing an error.

Execution Table

Step	Action	Evaluation	Result
1	Define interface User with readonly id and name	Interface created	User interface ready
2	Create user object with id=1, name='Alice'	Object matches interface	user = { id:1, name:'Alice' }
3	Attempt to assign user.id = 2	Check readonly property	Error: Cannot assign to 'id' because it is a read-only property.

💡 Execution stops due to error when trying to modify readonly property 'id'

Variable Tracker

Variable	Start	After 1	After 2	Final
user	undefined	{ id:1, name:'Alice' }	{ id:1, name:'Alice' }	Error on modification, user unchanged

Key Moments - 2 Insights

Why does trying to assign a new value to user.id cause an error?

Because 'id' is marked as readonly in the interface, TypeScript prevents any assignment to it after initialization, as shown in step 3 of the execution_table.

Can we change the 'name' property of user?

Yes, 'name' is not readonly, so it can be changed without error. The readonly restriction applies only to properties marked with 'readonly' in the interface.

Visual Quiz - 3 Questions

Look at the execution_table, what happens at step 3 when trying to assign user.id = 2?

A The assignment succeeds and user.id becomes 2

B TypeScript throws an error because 'id' is readonly

C The assignment is ignored silently

D The program crashes at runtime

💡 Hint

Check the 'Result' column in step 3 of execution_table

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

A { id:1, name:'Alice' }

B { id:2, name:'Alice' }

C undefined

D Error state

💡 Hint

Look at the 'After 2' column for 'user' in variable_tracker

If the 'readonly' keyword is removed from 'id' in the interface, what changes in the execution_table?

A Step 2 will fail to create the object

B Step 3 will still show an error

C Step 3 will show no error and assignment succeeds

D Step 1 will fail to define the interface

💡 Hint

Readonly keyword controls assignment errors as shown in step 3 of execution_table

Concept Snapshot

interface User {
  readonly id: number; // cannot change after init
  name: string;       // can change
}

Readonly properties prevent reassignment after object creation.
Trying to assign to them causes a compile-time error.
Use readonly to protect important data from accidental changes.

Full Transcript

This visual execution shows how readonly properties in TypeScript interfaces work. First, we define an interface User with a readonly id and a mutable name. Then, we create a user object with id 1 and name 'Alice'. When we try to assign a new value to user.id, TypeScript gives an error because id is readonly. The variable tracker confirms user stays unchanged after the failed assignment. Key points: readonly means you cannot change that property after creation, but other properties can be changed. The quiz questions check understanding of when errors happen and how readonly affects assignment.