Extending interfaces in Typescript - Mini Project: Build & Apply

Extending interfaces in TypeScript

📖 Scenario: You are creating a simple system to store information about vehicles. You want to start with a basic vehicle interface and then add more details for specific types of vehicles.

🎯 Goal: Build TypeScript interfaces where one interface extends another to add more properties. Then create an object using the extended interface and display its details.

📋 What You'll Learn

Create a base interface called Vehicle with properties make and model as strings

Create an interface called Car that extends Vehicle and adds a doors property as a number

Create a variable called myCar of type Car with specific values

Print the details of myCar using a template string

💡 Why This Matters

🌍 Real World

Extending interfaces helps organize related data in software, like vehicles, users, or products, making code easier to maintain and expand.

💼 Career

Understanding interface extension is important for TypeScript developers working on scalable applications with clear data structures.

1

Create the base interface

Create an interface called Vehicle with two string properties: make and model.

Typescript

// Your code here

Need a hint?

Use the interface keyword followed by the interface name and curly braces to define properties.

2

Extend the base interface

Create an interface called Car that extends Vehicle and adds a doors property of type number.

Typescript

interface Vehicle {
  make: string;
  model: string;
}
// Your code here

Need a hint?

Use interface Car extends Vehicle and add the new property inside curly braces.

3

Create an object using the extended interface

Create a variable called myCar of type Car and assign it an object with make as "Toyota", model as "Corolla", and doors as 4.

Typescript

interface Vehicle {
  make: string;
  model: string;
}

interface Car extends Vehicle {
  doors: number;
}
// Your code here

Need a hint?

Use const myCar: Car = { ... } and include all required properties.

4

Display the car details

Write a console.log statement to print: "My car is a [make] [model] with [doors] doors." using the myCar object and a template string.

Typescript

interface Vehicle {
  make: string;
  model: string;
}

interface Car extends Vehicle {
  doors: number;
}

const myCar: Car = {
  make: "Toyota",
  model: "Corolla",
  doors: 4
};
// Your code here

Need a hint?

Use console.log with backticks and ${} to insert variables.