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

Concept Flow - Declaration merging for namespaces

Namespace declared first

↓

Namespace declared again with same name

↓

Declarations inside both namespaces merged

↓

Merged namespace used in code

When two namespaces with the same name are declared, TypeScript merges their contents into one combined namespace.

Execution Sample

Typescript

namespace MySpace {
  export const a = 1;
}

namespace MySpace {
  export const b = 2;
}

console.log(MySpace.a, MySpace.b);

This code shows two namespace declarations with the same name. Their contents merge, so both a and b are accessible.

Execution Table

Step	Action	Namespace State	Output
1	Declare namespace MySpace with export const a=1	{ a: 1 }
2	Declare namespace MySpace again with export const b=2	{ a: 1, b: 2 }
3	Access MySpace.a and MySpace.b	{ a: 1, b: 2 }	1 2

💡 All declarations merged; both a and b are accessible in MySpace.

Variable Tracker

Namespace MySpace	After 1	After 2	Final
Properties	{ a: 1 }	{ a: 1, b: 2 }	{ a: 1, b: 2 }

Key Moments - 2 Insights

Why can we access both a and b from MySpace even though they are declared in separate namespace blocks?

Because TypeScript merges namespaces with the same name, combining their contents into one namespace object as shown in execution_table rows 1 and 2.

What happens if the same property name is declared in both namespaces?

The last declaration overwrites the previous one, so the property value from the later namespace block is used.

Visual Quiz - 3 Questions

Look at the execution_table at step 2, what properties does MySpace have?

A { b: 2 }

B { a: 1, b: 2 }

C { a: 1 }

D {}

💡 Hint

Check the Namespace State column at step 2 in the execution_table.

At which step do both a and b become accessible in MySpace?

A Step 2

B Step 1

C Step 3

D Never

💡 Hint

Look at when the namespace contains both properties in the execution_table.

If we add export const a = 5; in the second namespace block, what will MySpace.a be after merging?

A 1

B undefined

C 5

D Error

💡 Hint

Declaration merging overwrites properties with the same name from later declarations (see key_moments).

Concept Snapshot

Declaration merging for namespaces:
- Multiple namespace blocks with the same name merge their contents.
- Properties and functions combine into one namespace object.
- Later declarations overwrite earlier ones if names clash.
- Enables splitting code logically while sharing the same namespace.

Full Transcript

Declaration merging for namespaces in TypeScript means when you declare the same namespace multiple times, TypeScript combines all their contents into one. For example, if you declare namespace MySpace with a property a, then declare it again with property b, the final MySpace namespace has both a and b. This lets you organize code in parts but still use one namespace. If the same property is declared twice, the last one wins. The execution table shows step-by-step how the namespace grows and how both properties become accessible.