Extending interfaces in Typescript

Introduction

Extending interfaces lets you build new interfaces from existing ones. This helps you reuse code and keep things organized.

You want to add more properties to an existing interface without changing it.

You have common properties shared by many interfaces and want to avoid repeating them.

You want to create a more specific version of a general interface.

You want to combine multiple interfaces into one.

You want to keep your code easy to read and maintain by breaking big interfaces into smaller parts.

Syntax

Typescript

interface BaseInterface {
  property1: any;
}

interface ExtendedInterface extends BaseInterface {
  property2: any;
}

The extends keyword is used to inherit properties from another interface.

The new interface gets all properties from the base interface plus any new ones you add.

Examples

Here, Employee has all properties of Person plus employeeId.

Typescript

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

interface Employee extends Person {
  employeeId: number;
}

Car extends Vehicle by adding the doors property.

Typescript

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

interface Car extends Vehicle {
  doors: number;
}

C extends both A and B, combining their properties.

Typescript

interface A {
  a: string;
}
interface B {
  b: string;
}
interface C extends A, B {
  c: string;
}

Sample Program

This program shows how Dog extends Animal. The object myDog has all properties from both interfaces.

Typescript

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

interface Dog extends Animal {
  breed: string;
}

const myDog: Dog = {
  name: "Buddy",
  age: 5,
  breed: "Golden Retriever"
};

console.log(`My dog's name is ${myDog.name}, age is ${myDog.age}, and breed is ${myDog.breed}.`);

Important Notes

You can extend multiple interfaces by separating them with commas.

If two interfaces have properties with the same name, they must have compatible types.

Extending interfaces helps keep your code DRY (Don't Repeat Yourself).

Summary

Extending interfaces lets you build new interfaces from existing ones.

Use extends keyword to inherit properties.

This makes your code cleaner and easier to maintain.

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