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.