Nested object types in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a nested object type in TypeScript?

A nested object type is an object type that contains other object types as properties, allowing you to describe complex data structures with multiple layers.

beginner

How do you define a nested object type in TypeScript?

You define nested object types by specifying an object type inside another object type's property. For example:

type User = {
  name: string;
  address: {
    street: string;
    city: string;
  }
};

beginner

Why use nested object types?

Nested object types help organize related data clearly and safely. They make your code easier to understand and prevent errors by enforcing the shape of complex data.

beginner

How do you access a nested property in a TypeScript object?

You access nested properties using dot notation. For example, if you have user.address.city, you first access address then city inside it.

intermediate

Can nested object types include optional properties?

Yes, you can mark nested properties as optional using the ? symbol. For example:

type User = {
  name: string;
  address?: {
    street: string;
    city: string;
  }
};

Which syntax correctly defines a nested object type in TypeScript?

A type Person = { name: string; contact: { email: string; phone: string } }

B type Person = { name: string, contact: string }

C type Person = { name: string; contact: [string, string] }

D type Person = { name: string; contact: number }

Option A correctly defines 'contact' as a nested object with 'email' and 'phone' properties.

How do you access the city property in this object?

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

A user.city

B user.address['street']

C user['city']

D user.address.city

You access nested properties by chaining dot notation: user.address.city.

What does the '?' symbol mean in a nested object type property?

A The property is required

B The property is optional

C The property is a function

D The property is a number

The '?' marks a property as optional, meaning it may or may not be present.

Which of these is NOT a benefit of using nested object types?

A Faster runtime performance

B Improved type safety

C Clearer code structure

D Better organization of complex data

Nested object types improve code clarity and safety but do not directly affect runtime speed.

If a nested object property is optional, what happens if you try to access a deeper property without checking?

A The property will always have a default value

B TypeScript will throw a compile error

C You might get a runtime error if the property is undefined

D The nested property is automatically created

Accessing a property on undefined causes a runtime error, so you should check or use optional chaining.

Explain what nested object types are and why they are useful in TypeScript.

Think about how objects can contain other objects as properties.

Describe how to safely access a deeply nested property that might be optional.

Consider what happens if a property in the chain is missing.

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