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

Need a 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

Need a 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

Need a 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

Need a hint?

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