Typescript Organizing Code With Namespaces Complete Guide

1. What is a namespace in TypeScript?

Answer: Namespaces in TypeScript provide a way to logically group similar functionalities together and to avoid naming collisions by encapsulating them into their own scope. Prior to modules, namespaces were the primary method of organizing code in single-file applications.

2. How do I define a namespace in TypeScript?

Answer: You can define a namespace using the namespace keyword. Here’s a simple example:

namespace MyNamespace {
    export class MyClass {
        public static sayHello(): void {
            console.log("Hello from MyClass!");
        }
    }
}

In this example, MyNamespace is the name of your namespace, and MyClass is a class within that namespace. The export keyword makes MyClass accessible outside the namespace.

3. Can I nest namespaces in TypeScript?

Answer: Yes, you can nest namespaces in TypeScript. This can be helpful when you want to organize your code further or avoid deep flattening of your code structure.

namespace OuterNamespace {
    export namespace InnerNamespace {
        export class NestedClass {
            public sayHello(): void {
                console.log("Hello from NestedClass!");
            }
        }
    }
}

You can access NestedClass via OuterNamespace.InnerNamespace.NestedClass.

4. How do I use multiple namespaces in a single file?

Answer: You can declare multiple namespaces in a single file easily. Each namespace can be independently defined and accessed.

namespace NamespaceA {
    export class ClassA {
        public greet() {
            console.log("Hello from A");
        }
    }
}

namespace NamespaceB {
    export class ClassB {
        public greet() {
            console.log("Hello from B");
        }
    }
}

let objA = new NamespaceA.ClassA();
objA.greet(); // Outputs: Hello from A

let objB = new NamespaceB.ClassB();
objB.greet(); // Outputs: Hello from B

5. Can I split a namespace across multiple files?

Answer: Yes, TypeScript supports splitting namespaces across multiple files using the /// <reference path="..." /> directive. Here is an example:

File: shapes.ts

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

    export function drawPoint(point: Point): void {
        console.log(`Drawing point at x=${point.x}, y=${point.y}`);
    }
}

File: circles.ts

/// <reference path="shapes.ts" />
namespace Shapes {
    export function drawCircle(center: Point, radius: number): void {
        console.log(`Drawing circle at x=${center.x}, y=${center.y} with radius=${radius}`);
    }
}

To compile these files, you need to specify all the .ts files involved using the -outFile flag:

tsc --outFile app.js shapes.ts circles.ts

6. What is the purpose of the export keyword in a namespace?

Answer: The export keyword is used to make certain namespace members (like classes, interfaces, etc.) accessible outside the namespace. Without export, they are considered private members and won’t be visible externally.

namespace MathUtils {
    export const PI = 3.14159; // Can be accessed outside
    const E = 2.71828; // Cannot be accessed outside
}
console.log(MathUtils.PI); // Outputs: 3.14159
// console.log(MathUtils.E); // Error: 'E' is not accessible outside the namespace

7. How can I access nested namespaces in another file?

Answer: You can access nested namespaces in another file by correctly referencing the parent namespace. For example:

FileA.ts

namespace OuterNamespace {
    export namespace InnerNamespace {
        export class NestedClass {
            public sayHello(): void {
                console.log("Hello from NestedClass!");
            }
        }
    }
}

FileB.ts

/// <reference path="FileA.ts" />
let nestedObj = new OuterNamespace.InnerNamespace.NestedClass();
nestedObj.sayHello(); // Outputs: Hello from NestedClass!

Again, ensure both files are referenced during compilation.

8. How do namespaces work with modules in TypeScript?

Answer: Namespaces and modules are different ways of organizing code in TypeScript, and often it's recommended to use modules over namespaces as they work better in modern ES6 module ecosystems. If you're building a module-based structure, you can convert your namespaces to modules, like so:

Namespace Version:

namespace Shapes {
    export interface Circle {
        radius: number;
    }
}

Module Version:

// shapes.d.ts
export interface Circle {
    radius: number;
}

Modules can be imported and exported directly:

import { Circle } from './shapes';

9. Are namespaces still relevant in TypeScript?

Answer: While modules have become the more popular choice with the advent of ES6 modules, namespaces still have relevance, especially in large scale legacy code where modules aren't used or when the codebase consists of individual files rather than modules. They can also be useful in scripts which include other scripts using <script> tags in HTML.

10. What are some common mistakes to avoid when using namespaces?

Answer: Here are a few common pitfalls:

• Not exporting members: Forgetting to mark members as export makes them inaccessible outside the namespace.
• Incorrect references: When splitting namespaces into different files, ensure each dependent file is correctly referenced using /// <reference path="filename.ts" />.
• Misunderstanding scoping: Keep in mind that everything inside a namespace is scoped to that namespace, which means direct access to members within the same namespace or through references only.