Multiple interface extension in Typescript - Step-by-Step Execution

Concept Flow - Multiple interface extension

Define Interface A

↓

Define Interface B

↓

Define Interface C extends A, B

↓

Create Object of Interface C

↓

Access properties from A and B via C

This flow shows how one interface can extend multiple interfaces, combining their properties into one.

Execution Sample

Typescript

interface A {
  name: string;
}
interface B {
  age: number;
}
interface C extends A, B {}
const person: C = { name: "Alice", age: 30 };

Defines interfaces A and B, then interface C extends both. Creates an object person of type C with properties from A and B.

Execution Table

Step	Action	Evaluation	Result
1	Define interface A with property name:string	No runtime effect	Interface A ready
2	Define interface B with property age:number	No runtime effect	Interface B ready
3	Define interface C extends A, B	No runtime effect	Interface C combines A and B
4	Create object person of type C with name and age	Check properties match A and B	person = {name: "Alice", age: 30}
5	Access person.name	Retrieve string	"Alice"
6	Access person.age	Retrieve number	30

💡 All properties from A and B are present in C, so object creation succeeds.

Variable Tracker

Variable	Start	After Step 4	After Step 5	After Step 6
person	undefined	{name: "Alice", age: 30}	{name: "Alice", age: 30}	{name: "Alice", age: 30}
person.name	undefined	"Alice"	"Alice"	"Alice"
person.age	undefined	30	30	30

Key Moments - 3 Insights

Why can interface C have properties from both A and B?

Because interface C extends both A and B, it inherits all their properties combined, as shown in execution_table step 3.

Does defining interfaces affect runtime code?

No, interfaces are only for type checking and do not produce JavaScript code, as seen in steps 1-3 where evaluation is 'No runtime effect'.

What happens if person misses a property from A or B?

TypeScript will give a type error because person must have all properties from both interfaces, as checked in step 4.

Visual Quiz - 3 Questions

Look at the execution_table, what properties does interface C have at step 3?

A Only properties from interface A

B Only properties from interface B

C Properties from both A and B combined

D No properties

💡 Hint

Check execution_table row 3 where interface C extends A and B.

At which step is the object 'person' created with properties from both interfaces?

A Step 4

B Step 2

C Step 5

D Step 6

💡 Hint

Look at execution_table row 4 where person is assigned.

If interface C did not extend B, what would happen when creating 'person' with age property?

A No error, age is optional

B Type error because age is not defined in C

C person would have age but not name

D person would have both properties anyway

💡 Hint

Refer to key_moments about missing properties causing errors.

Concept Snapshot

interface C extends A, B {
  // C has all properties from A and B combined
}

const obj: C = { ... } // must have all properties

Interfaces only check types, no runtime code

Multiple interface extension merges properties

Full Transcript

This example shows how in TypeScript, one interface can extend multiple interfaces to combine their properties. Interfaces A and B define separate properties. Interface C extends both, so it includes all properties from A and B. When creating an object of type C, it must have all these properties. Interfaces do not produce runtime code; they only help TypeScript check types. If a property is missing, TypeScript will give an error. This helps keep code safe and clear.

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