Extending interfaces in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does it mean to extend an interface in TypeScript?

Extending an interface means creating a new interface that inherits properties and methods from an existing interface, allowing reuse and addition of new members.

intermediate

How do you extend multiple interfaces in TypeScript?

You list multiple interfaces separated by commas after the extends keyword, like interface NewInterface extends Interface1, Interface2 {}.

intermediate

Can an interface extend a class in TypeScript?

Yes, an interface can extend a class, inheriting its members but without implementation, allowing the interface to describe the shape of the class.

advanced

What happens if an extending interface redeclares a property from the base interface with a different type?

TypeScript will raise an error if the property types are incompatible, because the extending interface must be compatible with the base interface.

beginner

Show a simple example of extending an interface with one additional property.

Example:

interface Animal {
  name: string;
}
interface Dog extends Animal {
  breed: string;
}

Which keyword is used to extend an interface in TypeScript?

A implements

B extends

C inherits

D extendsInterface

The extends keyword is used to create a new interface that inherits from another interface.

Can an interface extend more than one interface?

A No, only one interface can be extended

B Yes, but only two interfaces

C No, interfaces cannot extend other interfaces

D Yes, by listing them separated by commas

An interface can extend multiple interfaces by listing them separated by commas after the extends keyword.

What is the result if an extending interface changes the type of a property from the base interface incompatibly?

A TypeScript throws a type compatibility error

B TypeScript allows it without errors

C The base interface is changed automatically

D The property is ignored

TypeScript enforces type compatibility and will throw an error if the property types conflict.

Which of the following is a valid way to extend interfaces?

A interface A extends B implements C {}

B interface A implements B, C {}

C interface A extends B, C {}

D interface A inherits B, C {}

Interfaces extend other interfaces using the extends keyword and can list multiple interfaces separated by commas.

Can an interface extend a class in TypeScript?

A Yes, interfaces can extend classes

B No, interfaces cannot extend classes

C Only abstract classes can be extended by interfaces

D Only classes with no constructor can be extended

Interfaces can extend classes to inherit their members' types without implementation.

Explain how extending interfaces helps in organizing and reusing code in TypeScript.

Think about how you can build on existing blueprints without rewriting everything.

Describe the syntax and rules for extending multiple interfaces in TypeScript.

Focus on how to list interfaces and what TypeScript expects.

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