Working with TypeScript Namespaces

TypeScript namespaces provide a way to organize and manage code within a single global scope. Namespaces help in grouping related code together, preventing naming conflicts, and improving code maintainability. This guide covers the basics of creating and using TypeScript namespaces with examples.

What are TypeScript Namespaces?

Namespaces are a way to encapsulate code in TypeScript. They allow grouping related functions, classes, and variables into a single logical unit, which can be useful in large projects to avoid naming collisions and to improve code organization.

Creating a Namespace

To create a namespace, use the namespace keyword followed by a name and a block of code. Inside the namespace block, define the functions, classes, or variables that should be part of that namespace.

// mathUtils.ts

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

  export function subtract(a: number, b: number): number {
    return a - b;
  }
}

In this example, the MathUtils namespace contains two functions, add and subtract, which are both exported for use outside the namespace.

Using a Namespace

To use the code inside a namespace, prefix the namespace name followed by a dot and the member name. Ensure that the namespace is available in the scope where it's being used.

// app.ts

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

const sum = MathUtils.add(5, 3);
const difference = MathUtils.subtract(5, 3);

console.log(`Sum: ${sum}`);
console.log(`Difference: ${difference}`);

In this example, the MathUtils namespace is referenced using a triple-slash directive '<reference path="mathUtils.ts" />', allowing access to its functions in the app.ts file.

Nested Namespaces

Namespaces can be nested within other namespaces, which helps in further organizing code. Nested namespaces are accessed by chaining the namespace names with dots.

// shapes.ts

namespace Shapes {
  export namespace Circle {
    export function area(radius: number): number {
      return Math.PI * radius * radius;
    }
  }

  export namespace Square {
    export function area(side: number): number {
      return side * side;
    }
  }
}

In this example, the Shapes namespace contains two nested namespaces: Circle and Square, each with its own area function.

Using Nested Namespaces

To access members of nested namespaces, use the dot notation to chain the namespace names.

// app.ts

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

const circleArea = Shapes.Circle.area(5);
const squareArea = Shapes.Square.area(4);

console.log(`Circle Area: ${circleArea}`);
console.log(`Square Area: ${squareArea}`);

In this example, the Circle and Square namespaces are accessed through the Shapes namespace, demonstrating how nested namespaces can be utilized.

Conclusion

TypeScript namespaces are a powerful tool for organizing and managing code. By using namespaces, code can be grouped logically, reducing the risk of naming conflicts and improving maintainability. Understanding how to create and use namespaces, including nested namespaces, is essential for effective TypeScript development.