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.