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.

Practice

1.

What does a nested object type in TypeScript represent?

For example, { user: { name: string; age: number } }

easy

A. An object that contains another object as a property

B. A function that returns an object

C. An array of objects

D. A primitive type like string or number

Solution

1. Step 1: Understand object properties

   In TypeScript, an object type can have properties that are themselves objects.

2. Step 2: Analyze the example type

   The example { user: { name: string; age: number } } shows a property user which is an object with its own properties.

3. Final Answer:

   An object that contains another object as a property -> Option A

4. Quick Check:

   Nested object = object inside object [OK]

Hint: Look for properties that are objects inside other objects [OK]

Common Mistakes:

• Thinking nested means array
• Confusing functions with objects
• Assuming primitive types can be nested objects

2.

Which of the following is the correct syntax to define a nested object type in TypeScript?

type Profile = {
  user: {
    id: number;
    name: string;
  }
};

easy

A. type Profile = { user: string; id: number }

B. type Profile = { user: (id: number, name: string) }

C. type Profile = { user: [number, string] }

D. type Profile = { user: { id: number; name: string } }

Solution

1. Step 1: Check object type syntax

   TypeScript uses curly braces to define object types with properties and their types.

2. Step 2: Match nested object syntax

   type Profile = { user: { id: number; name: string } } correctly nests an object type inside the user property with id and name.

3. Final Answer:

   type Profile = { user: { id: number; name: string } } -> Option D

4. Quick Check:

   Nested object uses braces, not parentheses or arrays [OK]

Hint: Use curly braces {} for nested object types, not parentheses or arrays [OK]

Common Mistakes:

• Using parentheses instead of braces
• Using arrays instead of objects
• Separating properties incorrectly

3.

What will be the output of the following TypeScript code?

type Data = {
  info: {
    count: number;
    label: string;
  }
};

const data: Data = {
  info: { count: 5, label: 'items' }
};

console.log(data.info.label);

medium

A. "count"

B. "items"

C. 5

D. undefined

Solution

1. Step 1: Understand the nested object structure

   The variable data has a property info which is an object with count and label.

2. Step 2: Access the nested property

   The code logs data.info.label, which is the string "items".

3. Final Answer:

   "items" -> Option B

4. Quick Check:

   Access nested property label = "items" [OK]

Hint: Follow the dot notation to reach nested property [OK]

Common Mistakes:

• Confusing property names
• Trying to access without the nested path
• Expecting number instead of string

4.

Identify the error in this TypeScript nested object type definition:

type Config = {
  settings: {
    theme: string;
    notifications: boolean
  }
};

const config: Config = {
  settings: {
    theme: 'dark',
    notifications: 'yes'
  }
};

medium

A. Missing semicolon after 'notifications' in type definition

B. The 'settings' property should be an array

C. The property 'notifications' should be a boolean, not a string

D. The 'theme' property should be a number

Solution

1. Step 1: Check type definition for 'notifications'

   The type says notifications: boolean, so it must be true or false.

2. Step 2: Check assigned value in object

   The value assigned is the string 'yes', which is not a boolean, causing a type error.

3. Final Answer:

   The property 'notifications' should be a boolean, not a string -> Option C

4. Quick Check:

   Type mismatch boolean vs string causes error [OK]

Hint: Match property types exactly in nested objects [OK]

Common Mistakes:

• Ignoring type mismatch errors
• Assuming strings can replace booleans
• Missing semicolons but they don't cause error here

5.

Given this nested object type, how can you define a type for a user profile that includes an address object with street and city?

type UserProfile = {
  id: number;
  name: string;
  address: {
    street: string;
    city: string;
  }
};

Which of the following correctly creates a variable profile of type UserProfile?

hard

A. const profile: UserProfile = { id: 1, name: 'Alice', address: { street: 'Main St', city: 'Wonderland' } };

B. const profile: UserProfile = { id: 1, name: 'Alice', address: 'Main St, Wonderland' };

C. const profile: UserProfile = { id: 1, name: 'Alice', address: { street: 'Main St' } };

D. const profile: UserProfile = { id: 1, name: 'Alice' };

Solution

1. Step 1: Review the UserProfile type

   UserProfile requires id, name, and an address object with street and city as strings.

2. Step 2: Check each option against the type

   const profile: UserProfile = { id: 1, name: 'Alice', address: { street: 'Main St', city: 'Wonderland' } }; provides all required properties with correct types. Options B, C, and D miss or mis-type the address property.

3. Final Answer:

   const profile: UserProfile = { id: 1, name: 'Alice', address: { street: 'Main St', city: 'Wonderland' } }; -> Option A

4. Quick Check:

   Complete nested object matches type [OK]

Hint: Provide all nested properties with correct types [OK]

Common Mistakes:

• Assigning string instead of nested object
• Omitting nested properties
• Leaving out required properties