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