Nested object types in Typescript - Step-by-Step Execution

Concept Flow - Nested object types

Define Outer Object Type

↓

Include Inner Object Type

↓

Create Variable with Nested Object

↓

Access Nested Properties

↓

Use Nested Object in Code

This flow shows how to define an object type that contains another object type inside it, create a variable with this nested structure, and access its inner properties.

Execution Sample

Typescript

type Address = {
  street: string;
  city: string;
};

type Person = {
  name: string;
  address: Address;
};

const person: Person = {
  name: "Alice",
  address: {
    street: "123 Maple St",
    city: "Wonderland"
  }
};

console.log(person.address.city);

This code defines nested object types Address and Person, creates a person object with nested address, and prints the city.

Execution Table

Step	Action	Evaluation	Result
1	Define type Address	street: string, city: string	Address type ready
2	Define type Person	name: string, address: Address	Person type ready
3	Create person variable	name: 'Alice', address: {street: '123 Maple St', city: 'Wonderland'}	person object created
4	Access person.address.street	person.address.street	"123 Maple St"
5	Access person.address.city	person.address.city	"Wonderland"
6	Access person.address.city	person.address.city	"Wonderland"
7	Print person.address.city	console.log output	Wonderland

💡 All steps complete, nested object created and accessed successfully

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
person	undefined	{name: 'Alice', address: {street: '123 Maple St', city: 'Wonderland'}}	{name: 'Alice', address: {street: '123 Maple St', city: 'Wonderland'}}	{name: 'Alice', address: {street: '123 Maple St', city: 'Wonderland'}}

Key Moments - 3 Insights

Why do we define Address type separately instead of directly inside Person?

Defining Address separately makes the code clearer and reusable. The execution_table rows 1 and 2 show separate type definitions before creating the nested object.

How do we access the city inside the nested address object?

We use dot notation: person.address.city. This is shown in execution_table row 6 where the nested property is accessed.

What happens if we try to assign a wrong type to address.city?

TypeScript will give an error because city expects a string. This is enforced by the type definitions in rows 1 and 2.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of person.address.city after step 5?

A "Wonderland"

B "123 Maple St"

C undefined

D "Alice"

💡 Hint

Check the variable_tracker after Step 5 for person.address.city value

At which step is the nested address object fully assigned?

A Step 5

B Step 4

C Step 3

D Step 6

💡 Hint

Look at execution_table rows where address.street and address.city are assigned

If we remove the Address type and put address as 'any', what changes in the execution?

A person.address.city will be a number

B TypeScript will allow any structure for address

C The code will not compile

D person.name will become optional

💡 Hint

Think about type safety and how Address type enforces structure

Concept Snapshot

Nested object types in TypeScript:
- Define inner object type separately (e.g., Address)
- Use inner type as property in outer type (e.g., Person.address: Address)
- Create variable matching nested structure
- Access nested properties with dot notation
- TypeScript checks nested types for safety

Full Transcript

This example shows how to define nested object types in TypeScript. First, we define an Address type with street and city as strings. Then, we define a Person type that has a name and an address of type Address. We create a person object with name 'Alice' and an address object with street '123 Maple St' and city 'Wonderland'. We access the nested city property using person.address.city and print it. The execution table traces each step from defining types to creating the nested object and accessing its properties. The variable tracker shows how the person variable changes as we assign nested values. Key moments clarify why separate types help and how to access nested properties. The quiz tests understanding of nested values and type safety. This teaches how nested object types help organize complex data clearly and safely in TypeScript.