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

Concept Flow - Optional properties in interfaces

Define Interface with Optional Property

↓

Create Object with or without Optional Property

↓

Access Property

↓

Property Exists

↓

Use Value

This flow shows how an interface with optional properties allows objects to include or omit those properties, and how code handles their presence or absence.

Execution Sample

Typescript

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

const p1: Person = { name: "Alice" };
const p2: Person = { name: "Bob", age: 30 };

Defines a Person interface with an optional age property, then creates two objects: one without age and one with age.

Execution Table

Step	Action	Object Created	Property 'age' Present?	Value of 'age'
1	Create p1 with only name	{ name: "Alice" }	No	undefined
2	Access p1.age	Same as above	No	undefined
3	Create p2 with name and age	{ name: "Bob", age: 30 }	Yes	30
4	Access p2.age	Same as above	Yes	30

💡 All objects created successfully; optional property 'age' may be missing or present.

Variable Tracker

Variable	Start	After Step 1	After Step 3	Final
p1	undefined	{ name: "Alice" }	{ name: "Alice" }	{ name: "Alice" }
p2	undefined	undefined	{ name: "Bob", age: 30 }	{ name: "Bob", age: 30 }

Key Moments - 2 Insights

Why can we create p1 without the 'age' property even though it's in the interface?

Because 'age' is marked optional with '?', it means objects can omit it. The execution_table rows 1 and 2 show p1 created without 'age' and accessing it returns undefined.

What happens if we try to access an optional property that is missing?

Accessing a missing optional property returns undefined, as shown in execution_table row 2 when accessing p1.age.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of p1.age after step 2?

A 0

B undefined

C null

D 30

💡 Hint

Check the 'Value of age' column in row 2 of the execution_table.

At which step does the object have the 'age' property present?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the 'Property age Present?' column in the execution_table.

If we remove the '?' from 'age' in the interface, what would happen when creating p1?

A p1 creation would cause a type error

B p1 would be created successfully without age

C p1.age would be undefined but no error

D p1.age would default to 0

💡 Hint

Optional properties allow omission; removing '?' makes 'age' required.

Concept Snapshot

interface Person {
  name: string;
  age?: number; // '?' means optional
}

- Objects can omit optional properties.
- Accessing missing optional properties returns undefined.
- Helps flexible object shapes without errors.

Full Transcript

This example shows how to use optional properties in TypeScript interfaces. The interface Person has a required 'name' and an optional 'age'. We create two objects: p1 without 'age' and p2 with 'age'. Accessing p1.age returns undefined because it is missing. Optional properties allow objects to be flexible and avoid errors when some data is not present.