Why Namespace merging in Typescript? - Purpose & Use Cases

The Big Idea

What if you could safely grow your code without worrying about name clashes or messy workarounds?

The Scenario

Imagine you have a big project where different parts of your code need to share the same name for related functions or variables. You try to keep them separate by creating multiple objects or classes with similar names, but it quickly becomes confusing and messy.

The Problem

Manually managing separate objects with the same name means you have to remember where each piece lives. It's easy to make mistakes, like overwriting something or forgetting to update all parts. This slows you down and makes your code harder to understand and maintain.

The Solution

Namespace merging lets you combine multiple declarations with the same name into one single namespace. This way, you can organize related code in different places, but TypeScript treats them as one. It keeps your code clean, easy to read, and avoids conflicts.

Before vs After

✗ Before

const Utils = { log: () => {} };
const Utils = { error: () => {} }; // Error: duplicate identifier

✓ After

namespace Utils {
  export function log() {}
}
namespace Utils {
  export function error() {}
}

What It Enables

It enables you to organize and extend your code in a flexible way without renaming or duplicating, making large projects easier to manage.

Real Life Example

Think of a library where different teams add features to the same utility namespace, like logging or validation, without stepping on each other's toes.

Key Takeaways

Manual separation of similar code causes confusion and errors.

Namespace merging combines related code under one name safely.

This keeps your project organized and easier to maintain.