Extending interfaces in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of extended interface property access

What is the output of this TypeScript code when compiled and run with Node.js?

Typescript

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

const myDog: Dog = { name: "Buddy", breed: "Golden Retriever" };
console.log(myDog.name + " is a " + myDog.breed);

A Buddy is a undefined

B Buddy is a Golden Retriever

C Error: Property 'breed' does not exist on type 'Dog'

D undefined is a Golden Retriever

💡 Hint

Remember that extending an interface adds properties from the base interface.

The interface Dog extends Animal, so it has both 'name' and 'breed'. The object myDog has both properties, so accessing them prints the combined string.

❓ Predict Output

intermediate

Output when extending multiple interfaces

What will this TypeScript code output when run?

Typescript

interface A {
  x: number;
}
interface B {
  y: number;
}
interface C extends A, B {
  z: number;
}
const obj: C = { x: 1, y: 2, z: 3 };
console.log(obj.x + obj.y + obj.z);

A 6

B NaN

C 123

D Error: Property 'y' does not exist on type 'C'

💡 Hint

Extending multiple interfaces combines their properties.

Interface C extends both A and B, so it has properties x, y, and z. The sum 1 + 2 + 3 equals 6.

🔧 Debug

advanced

Why does this extended interface cause a type error?

This TypeScript code causes a type error. What is the reason?

Typescript

interface Base {
  id: number;
}
interface Extended extends Base {
  id: string;
}
const obj: Extended = { id: "abc" };

A Object 'obj' must have both number and string types for 'id'

B Missing property 'id' in object literal

C Interface Extended must not extend Base

D Cannot redeclare property 'id' with a different type in the extended interface

💡 Hint

Check if property types are compatible when extending interfaces.

The interface Extended tries to change the type of 'id' from number to string, which is not allowed in TypeScript interface extension.

📝 Syntax

advanced

Identify the syntax error in interface extension

Which option contains the correct syntax to extend interface Person with interface Employee?

A interface Employee extends Person { salary: number; }

B interface Employee Person extends { salary: number; }

C interface Employee : Person { salary: number; }

D interface Employee inherits Person { salary: number; }

💡 Hint

The keyword to extend an interface is 'extends'.

Only option A uses the correct syntax 'extends' to inherit from another interface.

🚀 Application

expert

Number of properties in extended interface object

Given these interfaces and object, how many properties does the object 'fullProfile' have?

Typescript

interface Contact {
  email: string;
}
interface Profile extends Contact {
  username: string;
  age: number;
}
const fullProfile: Profile = {
  email: "[e-mail]",
  username: "user123",
  age: 30
};

A 1

B 2

C 3

D 4

💡 Hint

Count all properties from the base and extended interfaces present in the object.

The object fullProfile has 'email' from Contact and 'username' and 'age' from Profile, totaling 3 properties.

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