Nested object types in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a nested object type with a property 'address'.

Typescript

type User = {
  name: string;
  address: [1];
};

Drag options to blanks, or click blank then click option'

A{ street: string; city: string }

Bnumber

Cstring

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Using a simple type like string instead of an object type for address.

The property address is an object with nested properties street and city, so it needs an object type.

2fill in blank

medium

Complete the code to access the nested property 'city' from the user object.

Typescript

const user: User = {
  name: 'Alice',
  address: { street: 'Main St', city: 'Wonderland' }
};

const cityName = user.address.[1];

Drag options to blanks, or click blank then click option'

Acity

Baddress

Cname

Dstreet

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to access a property that doesn't exist at that level.

Using the wrong property name.

To get the city name, access the city property inside the address object.

3fill in blank

hard

Fix the error in the nested object type by completing the type for 'company'.

Typescript

type Employee = {
  id: number;
  company: [1];
};

Drag options to blanks, or click blank then click option'

Astring

B{ name: string; location: string }

Cnumber

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Using a primitive type like string instead of an object type for company.

The company property is an object with name and location properties, so it needs an object type.

4fill in blank

hard

Fill both blanks to define a nested object type with an array of objects.

Typescript

type Book = {
  title: string;
  author: [1];
};

type Library = {
  name: string;
  books: [2][];
};

Drag options to blanks, or click blank then click option'

ABook

Bstring

Cnumber

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Using a primitive type for books instead of an array of objects.

Using wrong type for author.

The books property is an array of Book objects, and the author property inside Book is a string.

5fill in blank

hard

Fill all three blanks to define a nested object type with optional and nested properties.

Typescript

type Profile = {
  username: string;
  contact: {
    email: [1];
    phone?: [2];
  };
  preferences: [3];
};

Drag options to blanks, or click blank then click option'

Astring

Bnumber

C{ theme: string; notifications: boolean }

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong types for email or phone.

Not defining preferences as an object.

The email is a string, phone is an optional number, and preferences is an object with theme and notifications properties.

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