TypeScript Namespaces

🧩 TypeScript Namespaces (Beginner → Advanced)

Namespaces in TypeScript are used to organize code, group related variables/functions/types, and avoid name collisions—especially in large or legacy projects.

⚠️ Note: In modern TypeScript, ES Modules (import/export) are preferred.
Namespaces are still important for understanding legacy code and interviews.

1️⃣ What Is a Namespace?

A namespace is a container that wraps related code under a single name.

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

Access it like:

MathUtils.add(2, 3);

2️⃣ Why Use Namespaces?

✔ Avoid global name conflicts
✔ Logical grouping of code
✔ Useful without module loaders
✔ Common in older TS codebases

3️⃣ Basic Namespace Example ⭐

namespace App {
export const version = "1.0";export function start() {
console.log(“App started”);
}
}

App.start();
console.log(App.version);

📌 Members must be marked with export to be accessible outside.

4️⃣ Namespace with Interfaces & Types ⭐

namespace Models {
export interface User {
id: number;
name: string;
}
}const u: Models.User = {
id: 1,
name: “Sanjit”
};

✔ Keeps related types together

5️⃣ Nested Namespaces 🔁

namespace Company {
export namespace HR {
export function hire() {
console.log("Hiring...");
}
}
}Company.HR.hire();

✔ Helps structure large codebases
⚠️ Can get verbose—use carefully

6️⃣ Namespace Across Multiple Files ⭐⭐

File: utils.ts

namespace Utils {
export function log(msg: string) {
console.log(msg);
}
}

File: main.ts

/// <reference path="utils.ts" />

Utils.log(“Hello”);

📌 Uses triple-slash directives
📌 Old-style dependency management

7️⃣ Namespace vs Module ⭐⭐⭐ (Very Important)

Feature Namespace Module
Syntax namespace import / export
Scope Global File-based
Modern usage ❌ Legacy ✅ Recommended
Bundlers ❌ Not needed ✅ Works well
Tree-shaking ❌ No ✅ Yes

✔ Use modules for new projects
✔ Learn namespaces for legacy & interviews

8️⃣ Namespace Merging 🔥

Multiple declarations with the same namespace name merge automatically.

namespace Lib {
export const version = "1.0";
}namespace Lib {
export function init() {
console.log(“Init”);
}
}

Lib.init();

✔ Powerful but can be confusing

9️⃣ export = and import = (Advanced / Legacy)

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

import MathLib = require("./mathlib");

⚠️ Mostly used for CommonJS interop

🔟 When NOT to Use Namespaces ❌

  • New applications

  • React / Angular / Node.js apps

  • When using ES modules

  • When bundlers are involved

Use ES Modules instead:

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

1️⃣1️⃣ Common Mistakes ❌

  • Forgetting export inside namespace

  • Mixing namespaces with ES modules

  • Over-nesting namespaces

  • Using namespaces in modern projects unnecessarily

📌 Interview Questions (Must Prepare)

  1. What is a namespace in TypeScript?

  2. Difference between namespace and module?

  3. Why are namespaces considered legacy?

  4. What is namespace merging?

  5. How to use namespaces across files?

  6. When should namespaces be avoided?

✅ Summary

✔ Namespaces group related code
✔ Prevent global naming conflicts
✔ Use export to expose members
✔ Support nesting & merging
✔ Mostly legacy, but important to know
✔ Prefer ES modules for modern development

You may also like...