Namespace declaration in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a namespace in TypeScript?

A namespace is a way to group related code like variables, functions, and classes under a single name to avoid name conflicts and organize code.

beginner

How do you declare a namespace in TypeScript?

Use the <code>namespace</code> keyword followed by the namespace name and curly braces containing the code to group.<br>Example:<br><pre>namespace MyNamespace {
  export function greet() { console.log('Hello'); }
}</pre>

beginner

Why do we use the export keyword inside a namespace?

To make functions, classes, or variables accessible outside the namespace, you must mark them with export. Otherwise, they stay private inside the namespace.

beginner

How do you access a function inside a namespace?

Use the namespace name followed by a dot and the function name.
Example:

MyNamespace.greet();

intermediate

Can namespaces be split across multiple files in TypeScript?

Yes, namespaces can be split into multiple files by declaring the same namespace name in each file. When compiled, TypeScript merges them into one namespace.

What keyword is used to declare a namespace in TypeScript?

A namespace

B module

C package

D class

The namespace keyword is used to declare a namespace in TypeScript.

How do you make a function inside a namespace accessible outside it?

A Use the <code>private</code> keyword

B Use the <code>public</code> keyword

C Use the <code>export</code> keyword

D No special keyword needed

Functions must be marked with export inside a namespace to be accessible outside.

How do you call a function named sayHi inside a namespace Greetings?

A sayHi.Greetings()

B sayHi()

C Greetings->sayHi()

D Greetings.sayHi()

You call it by prefixing with the namespace name: Greetings.sayHi().

Can namespaces help avoid name conflicts in large projects?

A Only if you use modules

B Yes, by grouping code under unique names

C Only if you use classes

D No, namespaces increase conflicts

Namespaces group related code and prevent name conflicts by creating unique scopes.

Are namespaces the same as ES6 modules in TypeScript?

A No, namespaces are internal grouping, modules are file-based

B Namespaces are deprecated modules

C Yes, they are identical

D Modules are a type of namespace

Namespaces are internal code grouping, while modules are based on files and imports/exports.

Explain what a namespace is and why it is useful in TypeScript.

Think about how you keep things organized in a big project.

Describe how to declare a namespace and access a function inside it.

Remember the syntax and how to reach inside the namespace.

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