Namespace merging in Typescript - Step-by-Step Execution

Concept Flow - Namespace merging

Declare Namespace A

↓

Declare Namespace A again

↓

Compiler merges both

↓

Use merged Namespace A

TypeScript merges multiple declarations of the same namespace into one combined namespace.

Execution Sample

Typescript

namespace A {
  export const x = 1;
}
namespace A {
  export const y = 2;
}
console.log(A.x, A.y);

This code shows two namespace declarations with the same name 'A' that merge into one namespace with both x and y.

Execution Table

Step	Action	Namespace State	Output
1	Declare namespace A with x=1	A = { x: 1 }
2	Declare namespace A again with y=2	A = { x: 1, y: 2 }
3	Access A.x and A.y	A unchanged	1 2

💡 All declarations merged; output shows both properties.

Variable Tracker

Namespace A	After 1	After 2	Final
Properties	{ x: 1 }	{ x: 1, y: 2 }	{ x: 1, y: 2 }

Key Moments - 2 Insights

Why can we declare the same namespace name twice?

TypeScript merges the contents of namespaces with the same name into one combined namespace, as shown in steps 1 and 2 of the execution_table.

What happens if both namespaces export the same name?

If both namespaces export the same name, it causes a compiler error due to duplicate identifier. This example avoids that by using different names (x and y).

Visual Quiz - 3 Questions

Look at the execution_table, what is the state of namespace A after step 2?

A { x: 1, y: 2 }

B { x: 1 }

C { y: 2 }

D {}

💡 Hint

Check the 'Namespace State' column in row 2 of execution_table.

At which step does the output '1 2' appear?

A Step 1

B Step 2

C Step 3

D No output

💡 Hint

Look at the 'Output' column in execution_table rows.

If the second namespace also exported 'x', what would happen?

A The second x would overwrite the first

B Compiler error due to duplicate export

C Both x values would exist separately

D Namespace merging would ignore the second x

💡 Hint

TypeScript checks for duplicate identifiers in merged namespaces.

Concept Snapshot

Namespace merging in TypeScript:
- Multiple namespaces with the same name combine into one.
- All exported members merge into a single namespace object.
- Avoid exporting duplicate names to prevent compiler errors.
- Use merged namespace by accessing combined members.

Full Transcript

This example shows how TypeScript merges multiple declarations of the same namespace name into one combined namespace. First, namespace A is declared with a property x=1. Then, namespace A is declared again with a property y=2. The compiler merges these so that namespace A contains both x and y. When accessing A.x and A.y, the output is '1 2'. This merging allows splitting namespace code across multiple blocks. However, exporting the same name twice causes a compiler error due to duplicate identifier.

Practice

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

easy

A. The second namespace overwrites the first one.

B. They merge into a single namespace combining all members.

C. A compile-time error occurs due to duplicate namespace names.

D. Only the first namespace is used; the second is ignored.

Solution

1. Step 1: Understand namespace merging concept

   TypeScript allows multiple namespace declarations with the same name to combine their members into one.

2. Step 2: Effect of merging

   All functions, variables, or types inside these namespaces become part of a single namespace accessible together.

3. Final Answer:

   They merge into a single namespace combining all members. -> Option B

4. Quick Check:

   Namespace merging = combined members [OK]

Hint: Same namespace names combine their contents automatically [OK]

Common Mistakes:

• Thinking second namespace replaces the first
• Expecting a compile error for duplicate namespaces
• Assuming namespaces remain separate

2. Which of the following is the correct syntax to export a function inside a namespace for external use?

easy

A. namespace MySpace { export function greet() { return 'Hi'; } }

B. namespace MySpace { public function greet() { return 'Hi'; } }

C. namespace MySpace { export greet() { return 'Hi'; } }

D. namespace MySpace { function greet() { return 'Hi'; } }

Solution

1. Step 1: Identify export keyword usage

   To make a function accessible outside the namespace, it must be marked with export.

2. Step 2: Check syntax correctness

   Only namespace MySpace { export function greet() { return 'Hi'; } } correctly uses export function greet() inside the namespace.

3. Final Answer:

   namespace MySpace { export function greet() { return 'Hi'; } } -> Option A

4. Quick Check:

   Export keyword needed for external access [OK]

Hint: Use 'export' before function to share outside namespace [OK]

Common Mistakes:

• Omitting 'export' keyword
• Using 'public' keyword which is invalid in namespaces
• Incorrect export syntax without 'function' keyword

3. Consider the following code:

namespace Alpha {
  export const value = 10;
}
namespace Alpha {
  export function getValue() { return value * 2; }
}
console.log(Alpha.getValue());

What is the output when this code runs?

medium

A. 20

B. 10

C. undefined

D. Runtime error

Solution

1. Step 1: Understand namespace merging effect

   Both namespace blocks named 'Alpha' merge, so value and getValue are in the same namespace.

2. Step 2: Evaluate function output

   getValue() returns value * 2, which is 10 * 2 = 20.

3. Final Answer:

   20 -> Option A

4. Quick Check:

   Namespace members combined, output = 20 [OK]

Hint: Merged namespaces share all exported members [OK]

Common Mistakes:

• Thinking namespaces are separate causing undefined
• Expecting runtime error due to multiple declarations
• Confusing output with original value

4. Identify the error in this code snippet:

namespace Beta {
  export let count = 5;
}
namespace Beta {
  let count = 10;
  export function showCount() { return count; }
}
console.log(Beta.showCount());

medium

A. Function 'showCount' cannot access 'count' declared outside.

B. Cannot declare 'count' twice in the same namespace.

C. Missing 'export' keyword on the second 'count'.

D. The inner 'count' shadows the exported 'count', causing unexpected output.

Solution

1. Step 1: Analyze variable declarations in merged namespace

   The second namespace declares a local count without export, which shadows the exported count from the first namespace.

2. Step 2: Effect on function output

   showCount() returns the inner count (10), not the exported one (5), which may be unexpected.

3. Final Answer:

   The inner 'count' shadows the exported 'count', causing unexpected output. -> Option D

4. Quick Check:

   Local variable shadows exported one [OK]

Hint: Inner variables can hide outer exported ones [OK]

Common Mistakes:

• Assuming redeclaration causes error
• Expecting 'showCount' to return 5
• Thinking export is needed on inner variable

5. You want to extend an existing namespace Utils defined in another file by adding a new exported function double that doubles a number. Which is the correct way to do this using namespace merging?

hard

A. module Utils { function double(x: number) { return x * 2; } }

B. namespace Utils { function double(x: number) { return x * 2; } }

C. namespace Utils { export function double(x: number) { return x * 2; } }

D. namespace Utils { const double = (x: number) => x * 2; }

Solution

1. Step 1: Use 'namespace' keyword to extend existing namespace

   To add members to an existing namespace, declare a new namespace block with the same name.

2. Step 2: Export the new function properly

   The function must be exported to be accessible outside the namespace.

3. Final Answer:

   namespace Utils { export function double(x: number) { return x * 2; } } -> Option C

4. Quick Check:

   Extend with 'namespace' and export function [OK]

Hint: Use 'namespace' with same name and export new members [OK]

Common Mistakes:

• Using 'module' instead of 'namespace'
• Not exporting the new function
• Declaring function without namespace