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

Concept Flow - Readonly class properties

Define class with readonly property

↓

Create instance of class

↓

Try to modify readonly property

↓

Error: Cannot assign

↓

End

This flow shows defining a class with a readonly property, creating an instance, and what happens when you try to change that property.

Execution Sample

Typescript

class Person {
  readonly name: string;
  constructor(name: string) {
    this.name = name;
  }
}

const p = new Person("Alice");
p.name = "Bob"; // Error

Defines a class with a readonly property 'name', creates an instance, then tries to change the readonly property which causes an error.

Execution Table

Step	Action	Evaluation	Result
1	Define class Person with readonly property 'name'	Class created	Class Person ready
2	Create instance p with name 'Alice'	Constructor sets this.name = 'Alice'	p.name = 'Alice'
3	Try to assign p.name = 'Bob'	Readonly property assignment	Error: Cannot assign to 'name' because it is a readonly property

💡 Execution stops at step 3 due to readonly property assignment error

Variable Tracker

Variable	Start	After Step 2	After Step 3
p.name	undefined	"Alice"	Error on assignment, value remains "Alice"

Key Moments - 2 Insights

Why can't we change the value of a readonly property after the object is created?

Because the property is marked as readonly, TypeScript prevents any assignment after initialization, as shown in execution_table step 3 where an error occurs.

Can we set the readonly property inside the constructor?

Yes, readonly properties can be assigned once inside the constructor, which is why in step 2 the assignment to 'Alice' works without error.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of p.name after step 2?

A "Alice"

B "Bob"

C undefined

D Error

💡 Hint

Check the 'Result' column in step 2 of the execution_table.

At which step does the readonly property assignment cause an error?

A Step 1

B Step 3

C Step 2

D No error occurs

💡 Hint

Look at the 'Evaluation' and 'Result' columns in the execution_table.

If the property was not marked readonly, what would happen at step 3?

A The program would crash

B Error still occurs

C p.name would change to "Bob"

D The constructor would fail

💡 Hint

Consider how normal property assignment works without readonly, see variable_tracker for p.name changes.

Concept Snapshot

Readonly class properties in TypeScript
- Use 'readonly' keyword before property name
- Property can be assigned once inside constructor
- Any assignment after construction causes error
- Helps prevent accidental changes to important data

Full Transcript

This example shows how to use readonly properties in TypeScript classes. First, a class Person is defined with a readonly property called name. When we create an instance of Person with the name 'Alice', the constructor sets the property successfully. However, if we try to change the name property later, TypeScript gives an error because the property is readonly. This prevents accidental changes to important data after the object is created.