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.

Practice

1. What happens when two interfaces with the same name are declared in TypeScript?

easy

A. Their properties merge into a single interface.

B. The second interface overwrites the first one.

C. A syntax error occurs due to duplicate names.

D. Only the first interface is used, others ignored.

Solution

1. Step 1: Understand interface declaration merging

   In TypeScript, interfaces with the same name combine their properties into one interface.

2. Step 2: Effect of merging

   This allows extending interfaces without overwriting or errors.

3. Final Answer:

   Their properties merge into a single interface. -> Option A

4. Quick Check:

   Declaration merging = properties combined [OK]

Hint: Same name interfaces combine properties automatically [OK]

Common Mistakes:

• Thinking second interface overwrites the first
• Expecting a syntax error on duplicate names
• Assuming only the first interface is used

2. Which of the following is the correct syntax to merge two interfaces named Person in TypeScript?

easy

A. class Person { name: string } class Person { age: number }

B. interface Person { name: string } interface Person { age: number }

C. type Person = { name: string } type Person = { age: number }

D. interface Person { name: string } type Person = { age: number }

Solution

1. Step 1: Identify valid interface merging syntax

   Only multiple interface declarations with the same name merge properties.

2. Step 2: Check each option

   interface Person { name: string } interface Person { age: number } uses two interface Person declarations, which is correct. Options B and C mix types and interfaces or duplicate types, which do not merge. class Person { name: string } class Person { age: number } uses classes, which do not merge.

3. Final Answer:

   interface Person { name: string } interface Person { age: number } -> Option B

4. Quick Check:

   Multiple interface declarations = merge [OK]

Hint: Only interfaces with same name merge, not types or classes [OK]

Common Mistakes:

• Trying to merge types instead of interfaces
• Using classes instead of interfaces
• Mixing type and interface declarations

3. What will be the output of the following TypeScript code?

interface Car { brand: string; }
interface Car { year: number; }
const myCar: Car = { brand: "Toyota", year: 2020 };
console.log(myCar.year);

medium

A. undefined

B. Runtime error

C. Compilation error

D. 2020

Solution

1. Step 1: Understand interface merging effect

   The two Car interfaces merge their properties, so Car has both brand and year.

2. Step 2: Analyze object and output

   The object myCar correctly has both properties. Logging myCar.year outputs 2020.

3. Final Answer:

   2020 -> Option D

4. Quick Check:

   Interface merge allows all properties [OK]

Hint: Merged interfaces combine properties, so all exist in object [OK]

Common Mistakes:

• Expecting a compilation error due to duplicate interface
• Thinking only first interface properties exist
• Confusing runtime and compile-time errors

4. Identify the error in the following TypeScript code that attempts interface merging:

interface User { id: number; }
interface User { name: string; }
const user: User = { id: 1 };

medium

A. Cannot assign number to 'id' property.

B. Duplicate interface declarations cause syntax error.

C. Missing property 'name' in object 'user'.

D. Interface merging does not work with 'const' declarations.

Solution

1. Step 1: Check interface merging and properties

   The two User interfaces merge, so User requires both id and name.

2. Step 2: Analyze object assignment

   The object user only has id, missing name, causing a type error.

3. Final Answer:

   Missing property 'name' in object 'user'. -> Option C

4. Quick Check:

   All merged properties required in object [OK]

Hint: Merged interfaces require all properties in objects [OK]

Common Mistakes:

• Thinking duplicate interfaces cause syntax errors
• Ignoring missing properties in merged interface
• Assuming 'const' affects interface merging

5. Given two interface declarations:

interface Product { id: number; }
interface Product { description?: string; price: number; }

Which of the following objects correctly implements the merged Product interface?

hard

A. { id: 101, price: 29.99 }

B. { id: 101, description: "Book" }

C. { price: 29.99, description: "Book" }

D. { id: 101 }

Solution

1. Step 1: Combine interface properties

   The merged Product interface requires id (number) and price (number), with optional description.

2. Step 2: Check each object against required properties

   { id: 101, price: 29.99 } has id and price, valid. { id: 101, description: "Book" } misses price. { price: 29.99, description: "Book" } misses id. { id: 101 } misses price.

3. Final Answer:

   { id: 101, price: 29.99 } -> Option A

4. Quick Check:

   Required properties must be present [OK]

Hint: All required merged properties must be in object [OK]

Common Mistakes:

• Ignoring required properties when optional ones exist
• Assuming optional properties are required
• Missing required properties in object