How would you handle collision of namespaces in TypeScript at scale?

Handling namespace collisions in TypeScript at scale can be a challenge, but it can be managed through the use of well-designed coding practices and TypeScript features like modules. Here are some strategies you can use to handle namespace collisions:

1. **Use modules**: TypeScript modules are the preferred method of organizing and encapsulating the code at scale. They inherently avoid namespace collisions by keeping all their code within a local scope that doesn’t pollute the global namespace. A module can export and import specific elements to manage visibility between different logical code separations:

// moduleA.ts
export function foo() {
}

// moduleB.ts
import { foo } from './moduleA';
foo();

2. **Prefix custom namespaces**: If you really need to use namespaces, it’s a good practice to prefix custom namespaces with a unique identifier (e.g., company or project name) that is less likely to cause a collision:

namespace MyCompany_MyProject_MyNamespace {
  export function foo() {
  }
}

3. **Merge and augment namespaces**: TypeScript provides a feature called namespace merging, this allows you to split the contents of a namespace across multiple files while having the original namespace recognize the additions.

// file1.ts
namespace MyNamespace {
    export function foo() {}
}

// file2.ts
namespace MyNamespace {
    export function bar() {}
}

When the generated JavaScript code from above TypeScript is used, both functions ‘foo‘ and ‘bar‘ are available on the ‘MyNamespace‘ object.

4. **Avoid polluting the global namespace**: Whenever possible, avoid placing your code directly in the global namespace. This will reduce the risk of collisions and make your code more modular and portable.

// Avoid this
function someGlobalFunction() {
}

5. **Use aliases**: If you are consuming external libraries and suspect potential namespace conflicts, you can import namespaces using aliases.

namespace ExternalLibNamespace {
    export function doSomething() {}
}
namespace MyAppNamespace {
    import doSomethingFunc = ExternalLibNamespace.doSomething;
    export function main() {
        doSomethingFunc();
    }
}

In conclusion, to handle namespace collisions in TypeScript at scale, consider using modern TypeScript modules, which provide better encapsulation and reduce the risk of collisions. If you must use namespaces, ensure you follow best practices like prefixing namespaces, merging and augmenting namespaces when needed, avoiding polluting the global namespace, and using aliases when consuming external libraries.