Nested object types in Typescript

Introduction

Nested object types help you describe objects inside other objects clearly. This makes your code easier to understand and safer to use.

When you have a user object that contains an address object inside it.

When you want to describe a product with details like price and manufacturer info inside it.

When you need to model a blog post that has an author object with name and contact info.

When you want to organize settings where some settings are grouped inside others.

Syntax

Typescript

type Outer = {
  inner: {
    property1: type1;
    property2: type2;
  };
};

You define an object type inside another by writing one object type inside the other.

Each nested object can have its own properties and types.

Examples

This defines a User with a nested address object that has street and city.

Typescript

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

Product has a nested details object with price and manufacturer info.

Typescript

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

BlogPost includes an author object with name and email.

Typescript

type BlogPost = {
  title: string;
  author: {
    name: string;
    email: string;
  };
};

Sample Program

This program defines a Person type with a nested contact object. It creates a person and prints the name, email, and phone.

Typescript

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

const person: Person = {
  name: "Alice",
  contact: {
    email: "[e-mail]",
    phone: "123-456-7890"
  }
};

console.log(`Name: ${person.name}`);
console.log(`Email: ${person.contact.email}`);
console.log(`Phone: ${person.contact.phone}`);

Important Notes

You can nest objects as deep as you want, but keep it simple to avoid confusion.

Using nested types helps catch mistakes early because TypeScript checks the structure.

Summary

Nested object types describe objects inside other objects.

They make your data structure clear and safe.

Use them when your data naturally groups inside other data.

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