Class property declarations in Typescript - Step-by-Step Execution

Concept Flow - Class property declarations

Start Class

↓

Declare Properties

↓

Constructor (optional)

↓

Create Instance

↓

Access/Modify Properties

↓

End

This flow shows how a class declares properties, optionally initializes them in a constructor, then creates instances to access or modify those properties.

Execution Sample

Typescript

class Person {
  name: string;
  age = 30;

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

Defines a Person class with a name property set in the constructor and an age property with a default value.

Execution Table

Step	Action	Property 'name'	Property 'age'	Notes
1	Class Person declared with properties	undefined	30	age has default value 30, name not set yet
2	Create instance p = new Person('Alice')	undefined	30	Before constructor runs
3	Constructor runs: this.name = 'Alice'	Alice	30	name property set to 'Alice'
4	Instance p ready	Alice	30	Properties initialized
5	Modify p.age = 35	Alice	35	age property changed to 35
6	End	Alice	35	Instance properties final state

💡 Instance properties set and modified, execution ends.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 5	Final
p.name	undefined	undefined	Alice	Alice	Alice
p.age	30	30	30	35	35

Key Moments - 3 Insights

Why is 'name' undefined before the constructor runs?

Because 'name' is declared but not given a default value, it is set only inside the constructor (see execution_table step 2 and 3).

Why does 'age' have a value before the constructor?

'age' has a default value of 30 declared directly in the class, so it exists on the instance immediately (see execution_table step 1 and 2).

Can we change property values after creating the instance?

Yes, properties like 'age' can be changed anytime after instance creation (see execution_table step 5).

Visual Quiz - 3 Questions

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

A undefined

B 'Alice'

C 30

D null

💡 Hint

Check the 'Property name' column at step 2 in the execution_table.

At which step does 'p.age' change from 30 to 35?

A Step 3

B Step 4

C Step 5

D Step 6

💡 Hint

Look at the 'Property age' column changes in the execution_table.

If we remove the default value for 'age', what would 'p.age' be at step 2?

A 30

B undefined

C null

D Error

💡 Hint

Default values set property before constructor; without it, property is undefined (see variable_tracker).

Concept Snapshot

Class property declarations in TypeScript:
- Declare properties inside class with optional default values.
- Properties without defaults are undefined until set (usually in constructor).
- Constructor can initialize properties.
- Properties can be accessed and changed on instances anytime.
- Example: class Person { name: string; age = 30; constructor(name: string) { this.name = name; } }

Full Transcript

This visual trace shows how class properties are declared and initialized in TypeScript. The class Person has two properties: 'name' declared without a default and 'age' with a default of 30. When a new Person instance is created with 'Alice' as the name, the constructor sets the 'name' property. The 'age' property starts with 30 because of its default. Later, 'age' can be changed. The execution table tracks these changes step-by-step, and the variable tracker shows property values at each stage. Key moments clarify why properties have certain values before and after construction. The quiz tests understanding of property initialization and modification. This helps beginners see how class properties work in real code.