Namespace merging in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of merged namespaces with functions and variables

What is the output of the following TypeScript code when compiled and run in JavaScript?

Typescript

namespace MyNamespace {
  export function greet() {
    return "Hello";
  }
}

namespace MyNamespace {
  export const name = "World";
}

console.log(MyNamespace.greet() + ", " + MyNamespace.name + "!");

A TypeError: MyNamespace.greet is not a function

B ReferenceError: MyNamespace is not defined

C "Hello World!"

D "Hello, World!"

💡 Hint

Remember that namespaces with the same name merge their exported members.

In TypeScript, multiple namespace declarations with the same name merge into one. So, the function greet and the constant name both exist in MyNamespace. Calling greet() returns "Hello" and accessing name returns "World". The output concatenates these with a comma and exclamation mark.

❓ Predict Output

intermediate

Merged namespace with interface and variable

What is the output of this TypeScript code after compilation and execution?

Typescript

namespace Data {
  export interface Item {
    id: number;
  }
}

namespace Data {
  export const item: Item = { id: 5 };
}

console.log(Data.item.id);

A undefined

B 5

C TypeError: Cannot read property 'id' of undefined

D SyntaxError: Unexpected token

💡 Hint

Interfaces do not exist at runtime but help with type checking.

The interface Item is merged into the Data namespace and used to type the variable item. The variable item exists at runtime with id 5, so logging Data.item.id outputs 5.

❓ Predict Output

advanced

Namespace merging with class and function

What will this TypeScript code output when run?

Typescript

namespace Shapes {
  export class Circle {
    constructor(public radius: number) {}
  }
}

namespace Shapes {
  export function createCircle(radius: number) {
    return new Circle(radius);
  }
}

const c = Shapes.createCircle(3);
console.log(c.radius);

A ReferenceError: Circle is not defined

B undefined

C 3

D TypeError: Shapes.createCircle is not a function

💡 Hint

Merged namespaces share the same scope for exported members.

The class Circle and function createCircle are merged into the Shapes namespace. The function can access Circle directly. The created Circle instance has radius 3, so logging c.radius outputs 3.

❓ Predict Output

advanced

Namespace merging with nested namespaces

What is the output of this code snippet?

Typescript

namespace Outer {
  export namespace Inner {
    export const value = 10;
  }
}

namespace Outer {
  export namespace Inner {
    export function getValue() {
      return Outer.Inner.value * 2;
    }
  }
}

console.log(Outer.Inner.getValue());

A 20

B ReferenceError: value is not defined

C 10

D TypeError: Outer.Inner.getValue is not a function

💡 Hint

Check variable scope inside nested namespaces.

Inside the function getValue, the variable value is not directly accessible because it is not prefixed with Outer.Inner. or this. By using Outer.Inner.value, the function correctly accesses the value. This outputs 20.

🧠 Conceptual

expert

Effect of namespace merging on types and values

Consider these two namespace declarations in TypeScript: namespace Example { export type T = string; } namespace Example { export const T = 123; } What happens when you try to use Example.T in a value context and a type context?

A In value context, Example.T is 123; in type context, Example.T is string.

B Example.T is always 123 in both value and type contexts.

C Example.T is always string in both value and type contexts.

D This causes a compile-time error due to name conflict.

💡 Hint

Types and values live in separate namespaces in TypeScript.

TypeScript allows merging of namespaces where a type and a value can share the same name. The type Example.T refers to the string type, while the value Example.T refers to the number 123. They coexist without conflict because types and values are separate.

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