Namespace declaration in Typescript - Step-by-Step Execution

Concept Flow - Namespace declaration

Start

↓

Declare Namespace

↓

Add Variables/Functions/Classes

↓

Access Members with Namespace

↓

Use in Code

↓

End

This flow shows how a namespace is declared, members are added, and then accessed using the namespace name.

Execution Sample

Typescript

namespace MySpace {
  export const greeting = "Hello";
  export function sayHi() {
    return greeting + ", world!";
  }
}
console.log(MySpace.sayHi());

This code declares a namespace with a variable and a function, then calls the function using the namespace.

Execution Table

Step	Action	Evaluation	Result
1	Declare namespace MySpace	Namespace created	MySpace namespace exists
2	Add exported const greeting	greeting = "Hello"	MySpace.greeting = "Hello"
3	Add exported function sayHi	Function defined	MySpace.sayHi() available
4	Call MySpace.sayHi()	Execute function	Returns "Hello, world!"
5	console.log output	Print returned string	Output: Hello, world!

💡 Execution ends after printing the greeting message.

Variable Tracker

Variable	Start	After Declaration	After Assignment	Final
MySpace	undefined	namespace object created	greeting and sayHi added	MySpace with greeting and sayHi
MySpace.greeting	undefined	undefined	"Hello"	"Hello"
MySpace.sayHi	undefined	undefined	function	function

Key Moments - 2 Insights

Why do we use 'export' inside the namespace?

Without 'export', members inside the namespace are private and cannot be accessed outside. See execution_table step 2 and 3 where 'export' makes greeting and sayHi accessible.

How do we access the function sayHi outside the namespace?

We use the namespace name followed by a dot and the function name, like MySpace.sayHi(). This is shown in execution_table step 4.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of MySpace.greeting after step 3?

A null

B undefined

C "Hello"

D Function

💡 Hint

Check variable_tracker row for MySpace.greeting after 'After Assignment' column.

At which step does the function sayHi become available inside the namespace?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

See execution_table step 3 where sayHi is defined.

If we remove 'export' from greeting, what happens when calling MySpace.sayHi()?

A sayHi returns 'Hello, world!' as before

B sayHi causes an error accessing greeting

C sayHi is not accessible outside namespace

D Namespace declaration fails

💡 Hint

Non-exported members are still accessible within the same namespace.

Concept Snapshot

Namespace declaration syntax:
namespace Name {
  export const/let/var/function/class ...
}

- Use 'export' to make members accessible outside.
- Access members with NamespaceName.member.
- Helps organize code and avoid name conflicts.

Full Transcript

This example shows how to declare a namespace in TypeScript. We start by creating a namespace called MySpace. Inside, we add a constant greeting and a function sayHi, both marked with 'export' so they can be used outside. When we call MySpace.sayHi(), it returns the greeting combined with ', world!'. The console.log prints this message. Export is important because without it, the members stay private inside the namespace. Accessing members requires prefixing with the namespace name. This helps keep code organized and prevents name clashes.

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