Declaration merging for interfaces in Typescript - Step-by-Step Execution

Concept Flow - Declaration merging for interfaces

Declare Interface A

↓

Declare Interface A again

↓

Merge properties of both

↓

Use merged Interface A

When two interfaces share the same name, TypeScript merges their properties into one combined interface.

Execution Sample

Typescript

interface User {
  name: string;
}
interface User {
  age: number;
}
const user: User = { name: "Alice", age: 30 };

This code merges two interface declarations named 'User' into one with both 'name' and 'age' properties.

Execution Table

Step	Action	Interface 'User' Properties	Resulting Type
1	Declare interface User with 'name: string'	{ name: string }	User has property 'name'
2	Declare interface User again with 'age: number'	{ name: string, age: number }	User now has 'name' and 'age'
3	Create object 'user' of type User	{ name: string, age: number }	Object must have both 'name' and 'age'
4	Assign { name: 'Alice', age: 30 } to 'user'	{ name: string, age: number }	Valid assignment, no errors

💡 All declarations merged; object matches merged interface properties.

Variable Tracker

Variable	After Step 1	After Step 2	After Step 3	After Step 4
User Interface Properties	{ name: string }	{ name: string, age: number }	{ name: string, age: number }	{ name: string, age: number }
user	undefined	undefined	uninitialized	{ name: 'Alice', age: 30 }

Key Moments - 3 Insights

Why does TypeScript allow two interfaces with the same name?

TypeScript merges them into one combined interface, as shown in execution_table rows 1 and 2.

What happens if the merged interfaces have conflicting property types?

TypeScript will show an error because the property types must be compatible; this is not shown here but would fail at assignment.

Does the object 'user' need to have all properties from both interfaces?

Yes, as shown in execution_table row 4, the object must have all merged properties to be valid.

Visual Quiz - 3 Questions

Look at the execution table, what properties does the 'User' interface have after step 2?

A { age: number }

B { name: string, age: number }

C { name: string }

D {}

💡 Hint

Check the 'Interface 'User' Properties' column at step 2 in the execution_table.

At which step is the object 'user' assigned its value?

A Step 4

B Step 2

C Step 3

D Step 1

💡 Hint

Look at the 'Action' column for when 'user' is assigned in the execution_table.

If the second interface declared 'age' as a string instead of number, what would happen?

A The first interface is ignored

B No error, properties merge fine

C Error due to conflicting property types

D The second interface overwrites the first

💡 Hint

Recall key_moments about conflicting property types causing errors.

Concept Snapshot

Declaration merging lets multiple interfaces with the same name combine their properties.
Syntax: Declare interface multiple times with same name.
Result: One interface with all properties merged.
Objects must have all merged properties.
Conflicting property types cause errors.

Full Transcript

Declaration merging in TypeScript means if you declare two interfaces with the same name, TypeScript combines their properties into one interface. For example, if one interface has a 'name' property and the other has an 'age' property, the merged interface has both. When you create an object of this interface type, it must have all these properties. If the properties have conflicting types, TypeScript will show an error. This helps organize code by allowing interface extensions without inheritance.