Namespace merging in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is namespace merging in TypeScript?

Namespace merging is when two or more namespaces with the same name combine their contents into a single namespace. This allows you to split code into parts but use it as one.

intermediate

Can interfaces and namespaces merge in TypeScript?

Yes! Interfaces and namespaces with the same name can merge. The namespace can add static members or helper functions to the interface.

intermediate

What happens if two namespaces with the same name have conflicting members?

If two namespaces have members with the same name and type, they merge fine. But if types conflict, TypeScript will show an error.

beginner

Show a simple example of namespace merging in TypeScript.

Example:

namespace MySpace {
  export const a = 1;
}

namespace MySpace {
  export const b = 2;
}

// Now MySpace has both 'a' and 'b' members.

beginner

Why use namespace merging instead of one big namespace?

Namespace merging helps organize code by splitting it into smaller parts. It also allows adding new members later without changing the original namespace.

What does namespace merging allow you to do in TypeScript?

A Convert namespaces into modules

B Merge classes and interfaces automatically

C Prevent namespaces from being extended

D Combine multiple namespaces with the same name into one

Namespace merging combines multiple namespaces with the same name into a single namespace.

Can a namespace and a class with the same name merge in TypeScript?

A Yes, they merge their members

B No, classes and namespaces cannot merge

C Only if the class is empty

D Only if the namespace is empty

In TypeScript, a namespace and a class with the same name can merge, combining static members.

What happens if two merged namespaces have a member with the same name but different types?

A TypeScript throws an error

B The first member is used, the second ignored

C The second member overwrites the first

D They merge without issues

Conflicting member types in merged namespaces cause TypeScript to throw an error.

Which of these can be merged with a namespace?

A Functions

B Variables

C Interfaces

D None of the above

Interfaces and namespaces with the same name can merge in TypeScript.

Why might you use namespace merging?

A To speed up program execution

B To organize code into smaller parts

C To prevent code reuse

D To avoid using modules

Namespace merging helps organize code by splitting it into smaller, manageable parts.

Explain how namespace merging works in TypeScript and give a simple example.

Think about how two parts with the same name combine their contents.

What are the benefits of using namespace merging instead of one large namespace?

Consider how splitting helps keep code clean and flexible.

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