Optional properties in Typescript - Step-by-Step Execution

Concept Flow - Optional properties

Define interface with optional property

↓

Create object with or without optional property

↓

Access optional property

↓

Check if property exists before use

↓

Use property safely or handle undefined

This flow shows how optional properties in TypeScript interfaces allow objects to have or skip certain properties, and how to safely access them.

Execution Sample

Typescript

interface User {
  name: string;
  age?: number;
}

const user1: User = { name: "Alice" };
const user2: User = { name: "Bob", age: 30 };

console.log(user1.age);
console.log(user2.age);

This code defines a User interface with an optional age property, creates two users (one without age), and logs their ages.

Execution Table

Step	Action	Object State	Property Access	Output
1	Define interface User with optional age	User { name: string; age?: number }	N/A	N/A
2	Create user1 with name only	user1 = { name: "Alice" }	user1.age	undefined
3	Create user2 with name and age	user2 = { name: "Bob", age: 30 }	user2.age	30
4	Log user1.age	user1 = { name: "Alice" }	user1.age	undefined
5	Log user2.age	user2 = { name: "Bob", age: 30 }	user2.age	30

💡 All steps executed; optional property age is undefined for user1 and defined for user2.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
user1	undefined	{ name: "Alice" }	{ name: "Alice" }	{ name: "Alice" }
user2	undefined	undefined	{ name: "Bob", age: 30 }	{ name: "Bob", age: 30 }

Key Moments - 2 Insights

Why does user1.age show undefined instead of an error?

Because age is marked optional with ?, it may be missing. Accessing it returns undefined, not an error, as shown in execution_table step 4.

Can we assign user1.age later even if it was not set initially?

Yes, optional means the property can be missing initially but can be added later. The interface allows it to be undefined or a number.

Visual Quiz - 3 Questions

Look at the execution_table, what is the output when accessing user1.age at step 4?

A undefined

B null

C 0

D Error

💡 Hint

Check the 'Output' column for step 4 in execution_table.

At which step is user2 created with the age property defined?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look at the 'Action' and 'Object State' columns in execution_table.

If we remove the ? from age in the interface, what would happen when creating user1 without age?

A user1.age would be undefined

B It would cause a TypeScript error

C user1 would have age set to null

D No change, code runs fine

💡 Hint

Optional properties allow missing fields; removing ? makes age required.

Concept Snapshot

interface User {
  name: string;
  age?: number; // optional property
}

- Optional properties may be missing
- Accessing missing optional property returns undefined
- Helps create flexible object shapes

Full Transcript

This example shows how TypeScript interfaces can have optional properties using the ? symbol. The User interface has an optional age property. We create two objects: user1 without age and user2 with age. Accessing user1.age returns undefined safely without error. This allows flexible objects where some properties can be missing. The execution table traces each step: defining interface, creating objects, and accessing properties. The variable tracker shows how user1 and user2 change. Key moments clarify why accessing missing optional properties does not cause errors. The quiz tests understanding of optional properties behavior and TypeScript rules.