> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.

# TypeScript Namespace

A TypeScript namespace is a language-specific organizational mechanism used to group logically related code and prevent global scope pollution. Under the hood, the TypeScript compiler translates a namespace into a globally accessible JavaScript object via an Immediately Invoked Function Expression (IIFE).

## Syntax and Encapsulation

Namespaces are declared using the `namespace` keyword. By default, all interfaces, classes, functions, and variables declared within a namespace are lexically scoped to that namespace and are inaccessible from the outside. To expose members to the external scope, they must be prefixed with the `export` modifier.

```typescript theme={"dark"}
namespace MathOperations {
    // Private to the namespace
    const PI = 3.14159; 

    // Accessible externally
    export function add(x: number, y: number): number {
        return x + y;
    }
}

// Accessing exported members via dot notation
const sum = MathOperations.add(5, 10);
```

## Compilation Output

To understand namespace mechanics, it is necessary to examine the emitted JavaScript. TypeScript utilizes an IIFE that passes the namespace identifier as an argument, mutating it to attach exported members.

```javascript theme={"dark"}
var MathOperations;
(function (MathOperations) {
    var PI = 3.14159;
    function add(x, y) {
        return x + y;
    }
    MathOperations.add = add; // Exported member attached to the object
})(MathOperations || (MathOperations = {}));
```

## Nested Namespaces

Namespaces can be nested to create deep hierarchical structures. Each nested namespace must also be explicitly exported if it needs to be accessed from outside the parent namespace.

```typescript theme={"dark"}
namespace Geometry {
    export namespace TwoDimensional {
        export class Square {
            constructor(public sideLength: number) {}
        }
    }
}

const mySquare = new Geometry.TwoDimensional.Square(10);
```

## Namespace Aliasing

To mitigate verbose dot-notation chains in deeply nested namespaces, TypeScript provides a specific aliasing syntax using the `import` keyword. This is distinct from ES6 module imports and acts strictly as a local reference to the namespace path.

```typescript theme={"dark"}
namespace Core {
    export namespace Utilities {
        export namespace Formatting {
            export function capitalize(val: string): string {
                return val.charAt(0).toUpperCase() + val.slice(1);
            }
        }
    }
}

// Creating a local alias
import Formatter = Core.Utilities.Formatting;

const text = Formatter.capitalize("typescript");
```

## Declaration Merging across Multiple Files

Namespaces support declaration merging. If multiple blocks or files declare a namespace with the identical identifier, the TypeScript compiler merges them into a single shared namespace object. When splitting namespaces across multiple files, triple-slash directives (`/// <reference path="..." />`) are used to instruct the compiler on file dependencies.

```typescript theme={"dark"}
// validation-interfaces.ts
namespace Validation {
    export interface StringValidator {
        isAcceptable(s: string): boolean;
    }
}

// letters-validator.ts
/// <reference path="validation-interfaces.ts" />
namespace Validation {
    export class LettersOnlyValidator implements StringValidator {
        isAcceptable(s: string) {
            return /^[A-Za-z]+$/.test(s);
        }
    }
}
```

During compilation, if the `--outFile` flag is used, TypeScript will concatenate these files in the order specified by the reference tags, resulting in a single IIFE that sequentially builds out the `Validation` object.

<div
  style={{ 
display: "flex", 
justifyContent: "space-between", 
alignItems: "center", 
maxWidth: "754px", 
padding: "1rem 0",
marginBottom: "24px"
}}
>
  <span style={{ fontWeight: "bold", fontSize: "1.25rem", color: "var(--tw-prose-headings)", fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" }}>Tired of Poor TypeScript Skills? Fix That With Deep Grasping!</span>

  <a
    href="https://syntblaze.com"
    target="_blank"
    style={{ 
  marginLeft: "24px",
  textDecoration: "none", 
  backgroundColor: "#007AFF",
  color: "#ffffff", 
  padding: "6px 16px", 
  borderRadius: "16px",
  fontSize: "0.9rem",
  fontWeight: "600",
  textAlign: "center",
  transition: "background-color 0.2s ease"
}}
  >
    Learn More
  </a>
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/skill-tracking.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=b9b0305c93bb501c9e767b5c76c88835" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/skill-tracking.png" />

  <img src="https://mintcdn.com/syntblazellc/23tyuOzaWS88qFlc/images/nuggets.png?fit=max&auto=format&n=23tyuOzaWS88qFlc&q=85&s=c86c80197299762989e9b882419b2109" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/nuggets.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/bite-sized-exercises.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=a65f9a38c37ff28ab73ed783c53c60e3" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/bite-sized-exercises.png" />
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap", marginTop: "12px" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/mastery-chain.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=748a1763454713e679260fbb95f154a2" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/mastery-chain.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-previews.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=242f61448ff5dd6deaaab2dccc13b507" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-previews.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-explanations.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=cf0fc1c31f9cd0fc26716781be05fbc9" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-explanations.png" />
</div>
