Namespaces – Typescript Foundations

Namespaces in TypeScript are a way to group related functions, interfaces, types, or classes under a single name to organize code and avoid name conflicts.

🔸 Think of namespaces like modules, but bundled within a single file or compiled JS output (i.e., no file-system separation required).

✅ Basic Syntax

namespace Utilities {
  export function greet(name: string): string {
    return `Hello, ${name}`;
  }

  export const PI = 3.14;
}

The export keyword is required to make items accessible outside the namespace.

🧪 Usage

console.log(Utilities.greet("Codeveda"));    // Hello, Codeveda
console.log(Utilities.PI);                   // 3.14

💡 Why Use Namespaces?

Benefit	Description
👨‍👩‍👧 Group related code	E.g., utility functions, constants
🔐 Avoid global scope pollution	Helps prevent name conflicts
📁 Structure large applications	Useful when not using modules or bundlers

🧩 Nesting Namespaces

namespace App {
  export namespace Models {
    export interface User {
      name: string;
      age: number;
    }
  }
}

const user: App.Models.User = {
  name: "Tisha",
  age: 21
};

🔄 Splitting Namespaces Across Files

To spread a namespace across files, use the /// <reference path="" /> directive.

// utils.ts
namespace Utils {
  export function sayHi() {
    console.log("Hi");
  }
}

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

Utils.sayHi(); // Hi

⚠️ Note: This pattern is mostly legacy. Modules (ES6/TypeScript) are preferred now in modern projects.

❌ Namespaces vs Modules

Feature	Namespace	Module (ESM / CommonJS)
File system scoped	❌ Not required	✅ Yes (one file = one module)
Runtime code	All in one compiled JS	Split per file
Preferred today?	❌ Only for legacy/internal use	✅ Yes (default for modern projects)

✅ When to Use Namespaces

Legacy TypeScript codebases
In browser-only apps without module bundlers
When needing to bundle all logic into one output JS file

🧠 Pro Tip

If you're using modern tooling (Webpack, Vite, etc.), use modules instead of namespaces.