TypeScript Namespace

In TypeScript, a namespace is a way to group related code under a single name, providing a logical structure for your application. Namespaces help organize large codebases by avoiding global scope pollution and preventing name conflicts. They are particularly useful when working with older JavaScript code or libraries, where modules might not be available.

 

What is a Namespace?

A namespace in TypeScript is a way to logically group related variables, functions, interfaces, or classes under a single name. Namespaces can be nested and can be used to encapsulate code to prevent clashes with other parts of the program.

 

Creating a Namespace

To create a namespace in TypeScript, you use the namespace keyword, followed by the name of the namespace and the code you want to include within it.

Example: Basic Namespace

namespace MathUtils {
  export function add(x: number, y: number): number {
    return x + y;
  }

  export function subtract(x: number, y: number): number {
    return x - y;
  }
}

• In this example, we have created a namespace called MathUtils that contains two functions: add and subtract.
• The export keyword makes the functions accessible outside the namespace.

Example: Using a Namespace

let sum = MathUtils.add(10, 5);
console.log(sum); // Output: 15

• Here, we access the add function from the MathUtils namespace and use it to perform an addition.

 

Nested Namespaces

Namespaces can be nested within one another, allowing you to create a hierarchical structure for your application.

Example: Nested Namespace

namespace Geometry {
  export namespace Shapes {
    export class Circle {
      constructor(public radius: number) {}

      area(): number {
        return Math.PI * this.radius ** 2;
      }
    }

    export class Square {
      constructor(public side: number) {}

      area(): number {
        return this.side ** 2;
      }
    }
  }
}

• In this example, the Shapes namespace is nested inside the Geometry namespace. It contains classes Circle and Square, each having an area method.

Example: Using Nested Namespace

let circle = new Geometry.Shapes.Circle(5);
console.log(circle.area()); // Output: 78.53981633974483

let square = new Geometry.Shapes.Square(4);
console.log(square.area()); // Output: 16

• We access the Circle and Square classes from the Shapes namespace inside the Geometry namespace.

 

Using Interfaces with Namespaces

You can also define interfaces inside a namespace. This helps in organizing related interfaces together.

Example: Interface inside a Namespace

namespace Shapes {
  export interface Point {
    x: number;
    y: number;
  }

  export class Circle {
    constructor(public center: Point, public radius: number) {}

    area(): number {
      return Math.PI * this.radius ** 2;
    }
  }
}

• The Point interface is defined inside the Shapes namespace, which is then used in the Circle class to define the center of the circle.

Example: Using Interface from a Namespace

let point: Shapes.Point = { x: 10, y: 20 };
let circle = new Shapes.Circle(point, 5);
console.log(circle.area()); // Output: 78.53981633974483

• The Point interface is used to define the point object, which is then passed to the Circle class.

 

Aliasing a Namespace

You can alias a namespace to make the code cleaner, especially if the namespace name is long.

Example: Alias Namespace

import MyShapes = Shapes;

let point: MyShapes.Point = { x: 10, y: 20 };
let circle = new MyShapes.Circle(point, 5);
console.log(circle.area()); // Output: 78.53981633974483

• In this case, we use MyShapes as an alias for the Shapes namespace to simplify the code.

 

Namespaces vs Modules

In TypeScript, modules and namespaces are often confused. Here’s a quick distinction:

• Namespaces are used for organizing code within a single file or across files that share a global scope. They do not rely on the module system and are typically used in TypeScript before modules were widely adopted.
• Modules are the modern way to organize code and work by default with imports and exports.

While modules are preferred in modern TypeScript development, namespaces are still supported for backward compatibility, especially for those working with legacy JavaScript code.

 

Summary

• Namespaces help in logically grouping related functions, classes, or interfaces under a single name to avoid conflicts.
• You can nest namespaces to create a hierarchical structure and organize your code.
• Interfaces and classes can be defined inside namespaces to encapsulate related types.
• Aliases allow you to shorten long namespace names for easier access.
• While namespaces are still useful, modules are the modern approach to organizing code in TypeScript.

Namespaces offer a way to keep code modular and prevent namespace pollution in large TypeScript applications.