TypeScript Namespace Merging: Combining Capabilities

In TypeScript, namespaces are a way to organize code and prevent global scope pollution. Sometimes, you might have related code spread across multiple files or modules that you want to logically group together. This challenge focuses on implementing namespace merging, a powerful TypeScript feature that allows you to extend an existing namespace by adding more declarations to it.

Problem Description

Your task is to create a system that demonstrates TypeScript's namespace merging capabilities. You will define multiple declarations with the same namespace name, and TypeScript will automatically merge them into a single, unified namespace. This is useful for organizing large codebases, augmenting existing libraries, or creating modular code structures.

What needs to be achieved:

• Define a namespace with a specific name.
• Define additional declarations (e.g., functions, classes, interfaces, variables) that also use the same namespace name, effectively merging them.
• Demonstrate that all merged members are accessible through the single, unified namespace.

Key requirements:

• Use TypeScript's namespace keyword.
• Ensure that members declared in separate namespace blocks with the same name are accessible as if they were declared within a single block.
• The final merged namespace should contain all the properties and methods from its constituent declarations.

Expected behavior:

When you access members of the namespace, you should be able to access properties, call functions, and instantiate classes that were defined in different namespace blocks.

Edge cases to consider:

• Order of declaration: While TypeScript merges namespaces regardless of the order they appear, consider how you might structure your files in a real project.
• Overwriting members: What happens if you try to declare a member with the same name in multiple namespace blocks? (TypeScript generally disallows this for non-interface types, but interfaces can be merged to extend each other).

Examples

Example 1: Merging Functions and Variables

// File 1: utils.ts
namespace AppUtils {
    export const defaultGreeting = "Hello";
}

// File 2: actions.ts
namespace AppUtils {
    export function greet(name: string): string {
        return `${defaultGreeting}, ${name}!`;
    }
}

// In your main application file (e.g., main.ts):
// Accessing merged members
console.log(AppUtils.defaultGreeting); // Expected Output: Hello
console.log(AppUtils.greet("World"));  // Expected Output: Hello, World!

Explanation: We define defaultGreeting in the first AppUtils namespace block. Then, we define the greet function in a separate AppUtils namespace block. TypeScript merges these, allowing greet to access defaultGreeting as if they were in the same scope.

Example 2: Merging Interfaces and Classes

// File 1: models.ts
namespace DataModels {
    export interface User {
        id: number;
        name: string;
    }
}

// File 2: services.ts
namespace DataModels {
    export class UserService {
        private users: User[] = [];

        addUser(user: User) {
            this.users.push(user);
        }

        getUserById(id: number): User | undefined {
            return this.users.find(u => u.id === id);
        }
    }
}

// In your main application file (e.g., main.ts):
// Using merged interface and class
const userService = new DataModels.UserService();
const newUser: DataModels.User = { id: 1, name: "Alice" };
userService.addUser(newUser);
const retrievedUser = userService.getUserById(1);
console.log(retrievedUser); // Expected Output: { id: 1, name: 'Alice' }

Explanation: The User interface is declared in one DataModels namespace. The UserService class, which uses the User interface, is declared in another DataModels namespace. TypeScript merges them, making User accessible within the UserService declaration and both accessible from the main application.

Example 3: Merging Interfaces for Extension

// File 1: shapes.ts
namespace Shapes {
    export interface Shape {
        color: string;
    }
}

// File 2: geometry.ts
namespace Shapes {
    export interface Circle extends Shape {
        radius: number;
    }
}

// File 3: drawing.ts
namespace Shapes {
    export class DrawingTool {
        drawCircle(circle: Circle) {
            console.log(`Drawing a circle with color ${circle.color} and radius ${circle.radius}`);
        }
    }
}

// In your main application file (e.g., main.ts):
// Demonstrating extended interface and merged class
const myDrawingTool = new Shapes.DrawingTool();
const myCircle: Shapes.Circle = { color: "red", radius: 10 };
myDrawingTool.drawCircle(myCircle); // Expected Output: Drawing a circle with color red and radius 10

Explanation: We start with a basic Shape interface. Then, we extend Shape with Circle in a separate namespace block. Finally, a DrawingTool class in yet another Shapes namespace block uses the fully merged Circle interface.

Constraints

• All code must be written in valid TypeScript.
• You must define at least two separate namespace blocks that share the same name.
• Each namespace block should declare at least one member (e.g., variable, function, class, interface).
• The final merged namespace should be accessible and its members verifiable.

Notes

• Think about how you might structure your project files to achieve this. In a real-world scenario, these namespace blocks would typically reside in different .ts files, and the TypeScript compiler would handle the merging.
• Consider the export keyword carefully. Members within a namespace need to be exported to be accessible from outside that specific namespace block (though they become accessible via the merged namespace).
• This challenge is about understanding the language feature. You don't need complex algorithms or data structures, but rather to correctly implement the namespace merging pattern.