Namespace declaration in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of accessing nested namespace value

What is the output of this TypeScript code using namespaces?

Typescript

namespace Outer {
  export namespace Inner {
    export const value = 42;
  }
}
console.log(Outer.Inner.value);

A 42

B undefined

C ReferenceError

D null

💡 Hint

Remember that exported members inside nested namespaces can be accessed using dot notation.

The value 42 is exported inside the nested namespace Inner, which is inside Outer. Accessing Outer.Inner.value prints 42.

🧠 Conceptual

intermediate

Purpose of 'export' keyword in namespaces

In TypeScript namespaces, what does the 'export' keyword do?

A Deletes the member after compilation

B Makes the member accessible outside the namespace

C Automatically imports the member into other namespaces

D Prevents the member from being accessed outside the namespace

💡 Hint

Think about how you can use a variable or function declared inside a namespace from outside it.

The 'export' keyword allows members inside a namespace to be accessed from outside that namespace.

🔧 Debug

advanced

Identify the error in namespace usage

What error will this TypeScript code produce?

Typescript

namespace MySpace {
  const secret = 'hidden';
}
console.log(MySpace.secret);

A Property 'secret' does not exist on type 'typeof MySpace'.

B ReferenceError: secret is not defined

C SyntaxError: Unexpected token

D No error, outputs 'hidden'

💡 Hint

Check if the member is exported to be accessible outside the namespace.

Since 'secret' is not exported, it is not accessible outside the namespace, causing a property error.

📝 Syntax

advanced

Correct syntax to declare a namespace with a function

Which option correctly declares a namespace with an exported function named greet?

A namespace GreetSpace { export greet() { return 'Hello'; } }

B namespace GreetSpace { function greet() { return 'Hello'; } }

C namespace GreetSpace { export function greet() { return 'Hello'; } }

D namespace GreetSpace { export const greet = () => 'Hello'; }

💡 Hint

Remember the correct syntax for exporting a function inside a namespace.

Option C correctly uses 'export function' syntax. Option C misses export, C has invalid syntax, D uses const which is valid but not the exact function declaration asked.

🚀 Application

expert

Number of accessible members after merging namespaces

Given these two namespace declarations, how many members are accessible from outside under the merged namespace 'Tools'?

Typescript

namespace Tools {
  export function toolA() { return 'A'; }
}
namespace Tools {
  export function toolB() { return 'B'; }
  function hiddenTool() { return 'hidden'; }
}
// Outside the namespace
const count = Object.keys(Tools).length;

A 0

B 3

C 1

D 2

💡 Hint

Only exported members are accessible outside. Hidden functions are not counted.

The merged namespace 'Tools' has two exported functions: toolA and toolB. The hiddenTool is not exported, so only 2 members are accessible.

Practice

1. What is the main purpose of a namespace in TypeScript?

easy

A. To import external libraries

B. To create a new type of variable

C. To define a function that runs automatically

D. To group related code under one name and avoid name clashes

Solution

1. Step 1: Understand what namespaces do

   Namespaces group related code together to keep it organized.

2. Step 2: Recognize the benefit of namespaces

   They help avoid name clashes by keeping code under one name.

3. Final Answer:

   To group related code under one name and avoid name clashes -> Option D

4. Quick Check:

   Namespaces = Group code + avoid clashes [OK]

Hint: Namespaces group code to avoid name conflicts [OK]

Common Mistakes:

• Thinking namespaces create new variable types
• Confusing namespaces with functions
• Assuming namespaces import libraries

2. Which of the following is the correct syntax to declare a namespace named Utils in TypeScript?

easy

A. namespace Utils { }

B. module Utils { }

C. package Utils { }

D. namespace = Utils { }

Solution

1. Step 1: Recall the correct keyword for namespaces

   TypeScript uses the keyword namespace to declare namespaces.

2. Step 2: Check the syntax format

   The correct syntax is namespace Name { }, so namespace Utils { } is correct.

3. Final Answer:

   namespace Utils { } -> Option A

4. Quick Check:

   Namespace syntax = namespace Name { } [OK]

Hint: Use 'namespace Name { }' to declare namespaces [OK]

Common Mistakes:

• Using 'module' instead of 'namespace'
• Adding '=' sign in declaration
• Using 'package' keyword which is invalid

3. What will be the output of the following TypeScript code?

namespace MathOps {
  export function add(a: number, b: number) {
    return a + b;
  }
}

console.log(MathOps.add(3, 4));

medium

A. undefined

B. 7

C. Error: add is not defined

D. NaN

Solution

1. Step 1: Understand the namespace and export usage

   The function add is inside namespace MathOps and is exported, so it can be accessed outside.

2. Step 2: Evaluate the function call

   Calling MathOps.add(3, 4) returns 3 + 4 = 7.

3. Final Answer:

   7 -> Option B

4. Quick Check:

   Exported function call returns sum 7 [OK]

Hint: Exported namespace members are accessible outside [OK]

Common Mistakes:

• Forgetting to export the function
• Trying to call function without namespace prefix
• Expecting runtime errors due to namespace

4. Identify the error in this TypeScript namespace code:

namespace Data {
  function getData() {
    return "info";
  }
}

console.log(Data.getData());

medium

A. Function getData is not exported, so it cannot be accessed outside

B. Namespace name Data is invalid

C. Syntax error in namespace declaration

D. Console.log is misspelled

Solution

1. Step 1: Check function accessibility inside namespace

   The function getData is declared but not exported, so it's private to the namespace.

2. Step 2: Understand why console.log(Data.getData()) fails

   Since getData is not exported, it cannot be accessed outside the namespace, causing an error.

3. Final Answer:

   Function getData is not exported, so it cannot be accessed outside -> Option A

4. Quick Check:

   Export missing = access error [OK]

Hint: Export functions to access them outside namespaces [OK]

Common Mistakes:

• Assuming all namespace members are public by default
• Thinking namespace name is invalid
• Ignoring export keyword importance

5. Given two namespaces below, what is the correct way to call the log function from Logger inside App?

namespace Logger {
  export function log(message: string) {
    console.log("LOG: " + message);
  }
}

namespace App {
  export function run() {
    // Call Logger.log here
  }
}

App.run();

hard

A. log("App started");

B. App.Logger.log("App started");

C. Logger.log("App started");

D. Logger::log("App started");

Solution

1. Step 1: Understand namespace access rules

   Namespaces are accessed by their name followed by dot and member name, so Logger.log is correct.

2. Step 2: Check the options for calling the function

   Only Logger.log("App started") correctly calls the exported function from the Logger namespace.

3. Final Answer:

   Logger.log("App started"); -> Option C

4. Quick Check:

   Namespace function call = NamespaceName.member [OK]

Hint: Call namespace functions with NamespaceName.function() [OK]

Common Mistakes:

• Calling function without namespace prefix
• Using invalid syntax like '::'
• Assuming nested namespaces auto-import members