Namespaces in Typescript

Namespaces are a way to organize your code in large projects, particularly when you want to avoid naming collisions between different parts of your codebase. In TypeScript, you can use namespaces to create a logical structure for your code, similar to how you might use modules in other programming languages.

In this article, we will cover how to declare and use namespaces in TypeScript, as well as how to combine namespaces with other language features such as classes and interfaces. By the end of this article, you will have a good understanding of how to use namespaces to organize your TypeScript code and avoid naming conflicts.

Declaring a Namespace:

To declare a namespace in TypeScript, you can use the namespace keyword followed by the name of your namespace. Here is an example of a simple namespace declaration:

namespace MyNamespace {
  // Code goes here
}

You can then use the namespace by prefixing the name of the namespace followed by a dot and the name of the item you want to access. For example, to access a variable inside the MyNamespace namespace, you would use the following syntax:

MyNamespace.myVariable;

You can also nest namespaces within each other to create a hierarchy of namespaces. Here is an example of how you might use nested namespaces:

namespace MyNamespace {
  export namespace InnerNamespace {
    export const myVariable = 'Hello';
  }
}

console.log(MyNamespace.InnerNamespace.myVariable); // Outputs "Hello"

Combining Namespaces with Other Language Features:

One of the key benefits of namespaces is that you can use them in combination with other language features such as classes and interfaces. For example, you can use a namespace to group together a set of related classes and interfaces, like this:

namespace MyNamespace {
  export class MyClass {
    // Code goes here
  }

  export interface MyInterface {
    // Code goes here
  }
}

You can then use these classes and interfaces by prefixing them with the namespace name, like this:

const myObject = new MyNamespace.MyClass();

Using the export keyword in combination with namespaces allows you to make the classes and interfaces available outside of the namespace, so they can be used by other parts of your codebase.

Merging Namespaces:

In some cases, you may want to split a namespace across multiple files in your project. To do this, you can use the namespace merging feature in TypeScript.

To merge two namespaces, you can use the same namespace name in both files, like this:

// File 1
namespace MyNamespace {
  export const myVariable = 'Hello';
}

// File 2
namespace MyNamespace {
  export function myFunction() {
    console.log(myVariable);
  }
}

// File 3
console.log(MyNamespace.myVariable); // Outputs "Hello"
MyNamespace.myFunction(); // Outputs "Hello"

In this example, the MyNamespace namespace is defined in both File 1 and File 2, and the two definitions are merged together when the code is compiled. This allows you to split up a namespace across multiple files while maintaining a clear and organized structure for your code.

Using the namespace merging feature in TypeScript can be very useful in large projects, as it allows you to split up your code into smaller, more manageable chunks. However, it’s important to note that you should use namespace merging with caution, as it can lead to unexpected behavior if you’re not careful.

For example, if you have two files that define the same namespace and both files contain a class or interface with the same name, the two definitions will be merged together. This can lead to confusing errors and bugs if you’re not careful, as the merged definitions may not behave as you expect.

To avoid these issues, it’s a good idea to use a consistent naming convention for your namespaces and avoid defining the same item multiple times within the same namespace.

Conclusion:

In this article, we covered the basics of namespaces in TypeScript, including how to declare and use namespaces, how to combine namespaces with other language features, and how to merge namespaces across multiple files. By following the best practices outlined in this article, you can use namespaces to organize your TypeScript code and avoid naming conflicts in large projects.

Exercises

To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.

namespace MyMath {
  export function calculateSum(num1: number, num2: number) {
    return num1 + num2;
  }
}

console.log(MyMath.calculateSum(1, 2)); // Outputs 3

namespace Shape {
  export interface IShape {
    area: number;
  }

  export class Rectangle implements IShape {
    constructor(public width: number, public height: number) {}

    calculateArea() {
      this.area = this.width * this.height;
      return this.area;
    }
  }
}

const rectangle = new Shape.Rectangle(10, 20);
console.log(rectangle.calculateArea()); // Outputs 200

namespace MyUtils {
  export class DateUtils {
    static getCurrentDate() {
      return new Date();
    }
  }
}

namespace MyApp {
  console.log(MyUtils.DateUtils.getCurrentDate()); // Outputs current date
}

namespace Animal {
  export interface IAnimal {
    name: string;
  }
}

namespace Dog {
  import Animal = Animal;

  export class Dog implements Animal.IAnimal {
    constructor(public name: string) {}
  }
}

const dog = new Dog.Dog("Buddy");
console.log(dog.name); // Outputs "Buddy"

namespace MyMath {
  export function calculateSum(num1: number, num2: number) {
    return num1 + num2;
  }
}

namespace MyApp {
  export function calculateSum(num1: number, num2: number, num3: number) {
    return num1 + num2 + num3;
  }

  MyMath.calculateSum = calculateSum;

  console.log(MyMath.calculateSum(1, 2, 3)); // Outputs 6
}