Declaration merging for interfaces in Typescript - Mini Project: Build & Apply

Declaration merging for interfaces

📖 Scenario: Imagine you are building a simple user profile system. You want to define a user interface that can be extended later with more details without changing the original interface.

🎯 Goal: Learn how to use declaration merging to extend interfaces in TypeScript by creating multiple interface declarations with the same name and combining their properties.

📋 What You'll Learn

Create an interface called User with two properties: name (string) and age (number).

Add a second declaration of the User interface with an additional property: email (string).

Create a variable user1 of type User with all three properties filled.

Print the user1 object to the console.

💡 Why This Matters

🌍 Real World

In real projects, you often need to extend existing interfaces from libraries or your own code without modifying the original interface. Declaration merging lets you do this cleanly.

💼 Career

Understanding declaration merging is useful for working with large TypeScript codebases, especially when integrating third-party libraries or adding features incrementally.

1

Create the initial User interface

Create an interface called User with two properties: name of type string and age of type number.

Typescript

// Your code here

Need a hint?

Use the interface keyword followed by the name User. Inside curly braces, add name: string; and age: number;.

2

Add a second declaration of the User interface

Add another interface declaration called User with one property: email of type string.

Typescript

interface User {
  // Your code here
}

Need a hint?

Write a new interface User block below the first one and add email: string; inside it.

3

Create a variable of type User

Create a variable called user1 of type User and assign it an object with name set to "Alice", age set to 30, and email set to "[e-mail]".

Typescript

interface User {
  name: string;
  age: number;
}

interface User {
  email: string;
}

// Your code here

Need a hint?

Use const user1: User = { ... } and fill in the properties exactly as shown.

4

Print the user1 object

Write a console.log statement to print the user1 object.

Typescript

interface User {
  name: string;
  age: number;
}

interface User {
  email: string;
}

const user1: User = {
  name: "Alice",
  age: 30,
  email: "[e-mail]"
};

// Your code here

Need a hint?

Use console.log(user1); to display the object in the console.