Namespace merging in Typescript - Mini Project: Build & Apply

Namespace Merging in TypeScript

📖 Scenario: Imagine you are organizing a small library system. You want to group related functions and variables under the same name to keep things tidy.

🎯 Goal: You will create two namespaces with the same name Library and merge them. Then you will use the merged namespace to access all the members.

📋 What You'll Learn

Create a namespace called Library with a variable books that holds the number 5

Create another namespace called Library with a function getBooks that returns the value of books

Use the merged Library namespace to call getBooks() and print the result

💡 Why This Matters

🌍 Real World

Namespace merging helps keep related code together, like grouping all library-related tools under one name.

💼 Career

Understanding namespaces and how to merge them is useful for organizing large TypeScript projects in professional software development.

1

Create the first namespace with a variable

Create a namespace called Library and inside it declare a variable books with the value 5.

Typescript

// Your code here

Hint

Use namespace Library { export let books = 5; } to create the namespace and export the variable.

2

Create the second namespace with a function

Create another namespace called Library and inside it declare a function getBooks that returns books from the first namespace.

Typescript

namespace Library {
    // Your code here
}

Hint

Remember to export the function and return the variable books inside it.

3

Use the merged namespace

Write a line of code that calls Library.getBooks() and stores the result in a variable called totalBooks.

Typescript

// Your code here

Hint

Use let totalBooks = Library.getBooks(); to call the function and save the result.

4

Print the result

Write a line of code to print the value of totalBooks using console.log.

Typescript

// Your code here

Hint

Use console.log(totalBooks); to show the number of books in the console.

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