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.