Nested object types in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of nested object property access

What is the output of the following TypeScript code?

Typescript

type User = {
  id: number;
  profile: {
    name: string;
    address: {
      city: string;
      zip: string;
    };
  };
};

const user: User = {
  id: 1,
  profile: {
    name: "Alice",
    address: {
      city: "Wonderland",
      zip: "12345"
    }
  }
};

console.log(user.profile.address.city);

A undefined

B "12345"

C "Wonderland"

D TypeError at runtime

💡 Hint

Look at how the nested objects are accessed using dot notation.

The code accesses the nested property 'city' inside 'address' inside 'profile' of the 'user' object. The value is "Wonderland".

❓ Predict Output

intermediate

Output of nested object with optional chaining

What will this TypeScript code print?

Typescript

type Product = {
  id: number;
  details?: {
    name: string;
    manufacturer?: {
      name: string;
    };
  };
};

const product: Product = {
  id: 101
};

console.log(product.details?.manufacturer?.name ?? "Unknown");

A "" (empty string)

B undefined

C TypeError at runtime

D "Unknown"

💡 Hint

Optional chaining returns undefined if any part is missing, then the nullish coalescing operator provides a default.

Since 'details' and 'manufacturer' are missing, optional chaining returns undefined, so the ?? operator returns "Unknown".

🔧 Debug

advanced

Identify the error in nested object type assignment

What error does this TypeScript code produce?

Typescript

type Config = {
  server: {
    host: string;
    port: number;
  };
};

const config: Config = {
  server: {
    host: "localhost",
    port: "8080"
  }
};

A No error, code compiles fine

B Type 'string' is not assignable to type 'number' for 'port'

C Property 'server' is missing in object

D Type 'number' is not assignable to type 'string' for 'host'

💡 Hint

Check the type of 'port' in the object vs the type definition.

The 'port' property is defined as a number but assigned a string "8080", causing a type error.

📝 Syntax

advanced

Which option correctly defines a nested object type?

Which of the following TypeScript type definitions correctly defines a nested object type for a 'Book' with 'title' (string) and 'author' (object with 'name' and 'age')?

A type Book = { title: string; author: { name: string; age: number } };

B type Book = { title: string; author: [name: string, age: number] };

C type Book = { title: string; author: (name: string, age: number) };

D type Book = { title: string; author: string & number };

💡 Hint

Look for the correct syntax for nested object types in TypeScript.

Option A uses the correct object type syntax with curly braces and property types.

🚀 Application

expert

Calculate total price from nested order object

Given the following nested order object, what is the value of 'totalPrice' after running the code?

Typescript

type Item = { name: string; price: number; quantity: number };

type Order = {
  id: number;
  items: Item[];
};

const order: Order = {
  id: 555,
  items: [
    { name: "Pen", price: 1.5, quantity: 10 },
    { name: "Notebook", price: 3, quantity: 5 },
    { name: "Eraser", price: 0.5, quantity: 20 }
  ]
};

const totalPrice = order.items.reduce((sum, item) => sum + item.price * item.quantity, 0);

console.log(totalPrice);

A 40

B 35

C 45

D 50

💡 Hint

Multiply price by quantity for each item and add all together.

Pen: 1.5*10=15, Notebook: 3*5=15, Eraser: 0.5*20=10; sum is 15+15+10=40

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