Nested object types in Typescript - Mini Project: Build & Apply

Nested Object Types in TypeScript

📖 Scenario: You are building a simple contact management system. Each contact has a name and an address. The address itself has multiple parts like street, city, and postal code.

🎯 Goal: Create a nested object type to represent a contact with an address, then create a contact object using that type, and finally print the contact's city.

📋 What You'll Learn

Define a TypeScript type called Address with street, city, and postalCode as string properties.

Define a TypeScript type called Contact with name as string and address as an Address type.

Create a variable called myContact of type Contact with specific values.

Print the city from myContact's address.

💡 Why This Matters

🌍 Real World

Nested object types are common when modeling real-world data like contacts, addresses, products with details, or user profiles.

💼 Career

Understanding nested types helps you write clear and safe TypeScript code, which is valuable for frontend and backend development jobs.

1

Define the Address type

Define a TypeScript type called Address with string properties street, city, and postalCode.

Typescript

// Define the Address type here
// Your code here

Hint

Use the type keyword to create a new type with the specified properties.

2

Define the Contact type with nested Address

Define a TypeScript type called Contact with a string property name and an address property of type Address.

Typescript

type Address = {
  street: string;
  city: string;
  postalCode: string;
};

// Define the Contact type here
// Your code here

Hint

Use the type keyword and refer to the Address type inside Contact.

3

Create a contact object

Create a variable called myContact of type Contact with name set to "Alice", street set to "123 Maple St", city set to "Wonderland", and postalCode set to "W1234".

Typescript

type Address = {
  street: string;
  city: string;
  postalCode: string;
};

type Contact = {
  name: string;
  address: Address;
};

// Create the myContact variable here
// Your code here

Hint

Use an object literal matching the Contact type with nested address object.

4

Print the city from the contact

Write a console.log statement to print the city property from myContact.address.

Typescript

type Address = {
  street: string;
  city: string;
  postalCode: string;
};

type Contact = {
  name: string;
  address: Address;
};

const myContact: Contact = {
  name: "Alice",
  address: {
    street: "123 Maple St",
    city: "Wonderland",
    postalCode: "W1234"
  }
};

// Print the city from myContact.address
// Your code here

Hint

Use console.log(myContact.address.city) to print the city.

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