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.