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

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

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

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

Hint

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

Practice

1. What does the extends keyword do when used with interfaces in TypeScript?

easy

A. It merges two unrelated interfaces without inheritance.

B. It deletes properties from an existing interface.

C. It creates a new interface that inherits properties from an existing interface.

D. It converts an interface into a class.

Solution

1. Step 1: Understand the role of extends in interfaces

   The extends keyword allows one interface to inherit properties from another, creating a new interface that includes all properties of the original.

2. Step 2: Compare options with this understanding

   Only It creates a new interface that inherits properties from an existing interface. correctly describes inheritance of properties. Other options describe unrelated or incorrect behaviors.

3. Final Answer:

   It creates a new interface that inherits properties from an existing interface. -> Option C

4. Quick Check:

   Extending interfaces means inheritance = D [OK]

Hint: Remember: extends means inherit properties [OK]

Common Mistakes:

• Thinking extends deletes properties
• Confusing interfaces with classes
• Believing extends merges unrelated interfaces

2. Which of the following is the correct syntax to extend an interface Person with a new interface Employee?

easy

A. interface Employee extends Person {}

B. interface Employee inherits Person {}

C. interface Employee : Person {}

D. interface Employee < Person {}

Solution

1. Step 1: Recall TypeScript syntax for extending interfaces

   The correct keyword to extend an interface is extends, used as interface NewInterface extends ExistingInterface {}.

2. Step 2: Check each option

   interface Employee extends Person {} uses the correct syntax. Options B, C, and D use invalid keywords or symbols.

3. Final Answer:

   interface Employee extends Person {} -> Option A

4. Quick Check:

   Use 'extends' keyword for interface inheritance [OK]

Hint: Use 'extends' keyword exactly for interfaces [OK]

Common Mistakes:

• Using 'inherits' instead of 'extends'
• Using ':' like in classes
• Using symbols like '<' incorrectly

3. Given the code below, what is the type of employee?

interface Person {
  name: string;
}
interface Employee extends Person {
  salary: number;
}
const employee: Employee = { name: "Alice", salary: 50000 };

medium

A. { name: string; salary: number; }

B. { salary: number; }

C. { name: string; }

D. Error: Cannot assign object to Employee

Solution

1. Step 1: Understand interface extension effect

   The Employee interface extends Person, so it includes all properties of Person plus its own.

2. Step 2: Analyze the assigned object

   The object has both name (string) and salary (number), matching the combined interface.

3. Final Answer:

   { name: string; salary: number; } -> Option A

4. Quick Check:

   Extended interface combines all properties = A [OK]

Hint: Extended interfaces combine all properties [OK]

Common Mistakes:

• Thinking only base interface properties apply
• Ignoring added properties in extension
• Expecting a type error incorrectly

4. Identify the error in the following TypeScript code:

interface Animal {
  species: string;
}
interface Dog extends Animal {
  breed: string;
}
const pet: Dog = { species: "Canine" };

medium

A. Property 'species' should be a number, not string.

B. Cannot extend interface 'Animal' with 'Dog'.

C. Syntax error in interface declaration.

D. Missing property 'breed' in object assigned to 'pet'.

Solution

1. Step 1: Check properties required by extended interface

   The Dog interface requires both species and breed properties.

2. Step 2: Verify object assigned to pet

   The object only has species, missing breed, causing a type error.

3. Final Answer:

   Missing property 'breed' in object assigned to 'pet'. -> Option D

4. Quick Check:

   All extended interface properties must be present [OK]

Hint: Check all properties from base and extended interfaces [OK]

Common Mistakes:

• Ignoring missing properties in assigned object
• Thinking extending interfaces causes syntax errors
• Confusing property types

5. You have two interfaces:

interface Vehicle {
  make: string;
  model: string;
}
interface ElectricVehicle extends Vehicle {
  batteryCapacity: number;
}

How would you create a new interface ElectricCar that extends ElectricVehicle and adds a range property (number)?

hard

A. interface ElectricCar extends Vehicle ElectricVehicle { range: number; }

B. interface ElectricCar extends ElectricVehicle { range: number; }

C. interface ElectricCar implements ElectricVehicle { range: number; }

D. interface ElectricCar extends Vehicle { batteryCapacity: number; range: number; }

Solution

1. Step 1: Understand interface extension chain

   ElectricVehicle already extends Vehicle, so extending ElectricVehicle includes all properties from both.

2. Step 2: Define ElectricCar extending ElectricVehicle and add range

   The correct syntax is interface ElectricCar extends ElectricVehicle { range: number; }.

3. Step 3: Evaluate other options

   interface ElectricCar extends Vehicle ElectricVehicle { range: number; } has invalid syntax (missing comma). interface ElectricCar implements ElectricVehicle { range: number; } uses implements which is invalid for interfaces. interface ElectricCar extends Vehicle { batteryCapacity: number; range: number; } misses extending ElectricVehicle and manually adds properties.

4. Final Answer:

   interface ElectricCar extends ElectricVehicle { range: number; } -> Option B

5. Quick Check:

   Extend the most specific interface and add new properties [OK]

Hint: Extend the most specific interface, add new properties [OK]

Common Mistakes:

• Trying to extend multiple interfaces unnecessarily
• Using 'implements' instead of 'extends' for interfaces
• Manually repeating inherited properties