Multiple interface extension in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of multiple interface extension with overlapping properties

What is the output of the following TypeScript code when compiled and run with Node.js (ignoring type errors)?

Typescript

interface A {
  x: number;
}
interface B {
  y: string;
}
interface C extends A, B {
  z: boolean;
}
const obj: C = { x: 10, y: "hello", z: true };
console.log(obj.x, obj.y, obj.z);

A 10 undefined true

B 10 hello true

C undefined hello true

D Compilation error due to multiple interface extension

💡 Hint

Interfaces can extend multiple interfaces and combine their properties.

Interface C extends both A and B, so it has all properties x, y, and z. The object obj correctly implements all properties, so logging them prints their values.

❓ Predict Output

intermediate

Property type conflict in multiple interface extension

What error or output occurs when the following TypeScript code is compiled?

Typescript

interface A {
  prop: number;
}
interface B {
  prop: string;
}
interface C extends A, B {}
const obj: C = { prop: 42 };

A No error, obj.prop is string '42'

B No error, obj.prop is number 42

C Runtime error due to conflicting types

D Compilation error: Interface 'C' cannot simultaneously extend types with conflicting property 'prop'.

💡 Hint

Check if properties with the same name but different types cause conflicts.

TypeScript does not allow interfaces to extend multiple interfaces that declare the same property with incompatible types. This causes a compilation error.

🔧 Debug

advanced

Why does this multiple interface extension cause a type error?

Given the code below, why does TypeScript report an error on the assignment to obj?

Typescript

interface X {
  a: number;
}
interface Y {
  b: string;
}
interface Z extends X, Y {
  a: string;
}
const obj: Z = { a: "test", b: "hello" };

A Because interface Z redeclares property 'a' with a different type than interface X, causing a conflict.

B Because property 'b' is missing in obj.

C Because interface Z cannot extend more than one interface.

D Because obj is missing property 'a' of type number.

💡 Hint

Look at property 'a' in interfaces X and Z.

Interface Z extends X which has 'a' as number, but Z redeclares 'a' as string, causing a type conflict that TypeScript flags as an error.

🚀 Application

advanced

Designing an interface that extends multiple interfaces with optional properties

You want to create an interface 'Person' that extends interfaces 'Name' and 'Contact'. 'Name' has required properties 'first' and 'last'. 'Contact' has optional properties 'email' and 'phone'. Which interface definition correctly models this?

A

interface Person extends Name {
  email?: string;
  phone?: string;
}

B

interface Person extends Contact {
  first: string;
  last: string;
}

C interface Person extends Name, Contact {}

D

interface Person {
  first: string;
  last: string;
  email?: string;
  phone?: string;
}

💡 Hint

Interfaces can extend multiple interfaces to combine their properties.

Extending both Name and Contact combines required and optional properties correctly. Option C does this directly.

🧠 Conceptual

expert

Understanding property merging in multiple interface extension

Consider these interfaces: interface A { x: number; } interface B { x?: number; } interface C extends A, B {} What is the type of property 'x' in interface C?

A 'x' is required and of type number

B Compilation error due to conflicting optionality

C 'x' is required and of type number | undefined

D 'x' is optional and of type number

💡 Hint

Required properties take precedence over optional ones when merging.

When interfaces are merged, a required property overrides an optional one with the same name and type. So 'x' is required number in C.

Practice

1. What does interface C extends A, B mean in TypeScript?

easy

A. Interface C is unrelated to interfaces A and B.

B. Interface C can only have properties from A or B, not both.

C. Interface C replaces interfaces A and B completely.

D. Interface C includes all properties from interfaces A and B.

Solution

1. Step 1: Understand interface extension

   When an interface extends others, it inherits all their properties.

2. Step 2: Apply to multiple interfaces

   Extending both A and B means C has all properties from both interfaces combined.

3. Final Answer:

   Interface C includes all properties from interfaces A and B. -> Option D

4. Quick Check:

   Multiple interface extension = combined properties [OK]

Hint: Extending multiple interfaces merges all their properties [OK]

Common Mistakes:

• Thinking extension replaces interfaces
• Believing only one interface's properties are included
• Confusing extension with implementation

2. Which of the following is the correct syntax to extend two interfaces A and B in TypeScript?

easy

A. interface C extends A, B {}

B. interface C extends (A & B) {}

C. interface C implements A, B {}

D. interface C inherits A, B {}

Solution

1. Step 1: Recall TypeScript interface extension syntax

   Interfaces extend others using extends followed by comma-separated interfaces.

2. Step 2: Check each option

   interface C extends A, B {} uses correct syntax: interface C extends A, B {}. Others are invalid syntax.

3. Final Answer:

   interface C extends A, B {} -> Option A

4. Quick Check:

   Correct syntax uses extends with commas [OK]

Hint: Use 'extends A, B' to extend multiple interfaces [OK]

Common Mistakes:

• Using implements instead of extends for interfaces
• Using parentheses or & inside extends
• Using 'inherits' keyword which doesn't exist

3. Given the code:

interface A { x: number; }
interface B { y: string; }
interface C extends A, B { z: boolean; }
const obj: C = { x: 10, y: "hello", z: true };

What is the type of obj?

medium

A. { x: number; z: boolean; }

B. { x: number; y: string; z: boolean; }

C. { y: string; z: boolean; }

D. { x: number; y: string; }

Solution

1. Step 1: Understand interface C extension

   Interface C extends A and B, so it has properties x (number), y (string), and its own z (boolean).

2. Step 2: Analyze object type

   The object has all three properties with correct types, matching combined interface C.

3. Final Answer:

   { x: number; y: string; z: boolean; } -> Option B

4. Quick Check:

   Extended interface properties combine in object type [OK]

Hint: Extended interfaces combine all properties in the new type [OK]

Common Mistakes:

• Ignoring properties from one of the extended interfaces
• Missing the new property z in interface C
• Confusing property types

4. What is wrong with this code?

interface A { a: number; }
interface B { b: string; }
interface C extends A, B {}
const obj: C = { a: 5 };

medium

A. Property 'b' is missing in object assigned to type C.

B. Interface C cannot extend two interfaces.

C. Property 'a' should be a string, not number.

D. Object syntax is invalid.

Solution

1. Step 1: Check interface C properties

   Interface C extends A and B, so it requires properties 'a' (number) and 'b' (string).

2. Step 2: Check object assigned to C

   The object only has 'a', missing required 'b' property, causing a type error.

3. Final Answer:

   Property 'b' is missing in object assigned to type C. -> Option A

4. Quick Check:

   All extended interface properties must be present [OK]

Hint: All properties from extended interfaces must be included [OK]

Common Mistakes:

• Assuming extending multiple interfaces is invalid
• Ignoring missing properties in object
• Confusing property types

5. You have interfaces:

interface Name { first: string; last: string; }
interface Contact { email: string; phone: string; }
interface Employee extends Name, Contact { id: number; }

Which object correctly implements Employee?

hard

A. { email: "[e-mail]", phone: "123-456", id: 101 }

B. { first: "Jane", last: "Doe", id: 101 }

C. { first: "Jane", last: "Doe", email: "[e-mail]", phone: "123-456", id: 101 }

D. { first: "Jane", last: "Doe", email: "[e-mail]", id: 101 }

Solution

1. Step 1: List required properties of Employee

   Employee extends Name and Contact, so it needs first, last, email, phone, and also id.

2. Step 2: Check each object for all required properties

   Only { first: "Jane", last: "Doe", email: "[e-mail]", phone: "123-456", id: 101 } has all five properties with correct types.

3. Final Answer:

   { first: "Jane", last: "Doe", email: "[e-mail]", phone: "123-456", id: 101 } -> Option C

4. Quick Check:

   All extended interface properties plus own must be present [OK]

Hint: Include all properties from all extended interfaces plus new ones [OK]

Common Mistakes:

• Missing some properties from extended interfaces
• Confusing which properties belong to which interface
• Leaving out the new property id