TypeScript Only Features 9 exercises
explainer

Declaration Merging with Interfaces Inside of Namespaces

Here we have two GeometryUtils namespaces, both with a Rectangle namespace inside that contain a Rectangle interface. One interface contains width and height properties, while the other contains color.

namespace GeometryUtils {
  export namespace Rectangle {
    export int
Loading explainer

Transcript

00:00 You've heard of interfaces, declaration merging. You've heard of namespaces, declaration merging. Well, how about interfaces within namespaces, declaration merging? I mean, why not, right? We have our geometry utils. And in this one, we have our export namespace rectangle

00:19 in both of them. If I add my cursors to both of them, you can see that namespace geometry utils, then export namespace rectangle, then export interface rectangle. In the top one, we have two properties, width number, height number. Then down the bottom, we have color string.

00:36 So when we go to use geometry utils rectangle.rectangle, well, color is required in them because they have declaration merged. There we go. And if we come on and click on this, you notice that we can go to definition on both of them and we'll run up against both of them. Yeah, I mean, why not, right? I mean, that makes sense. That's consistent behavior.

00:57 Interfaces in the same scope to declaration merge. And this will come up when we look at global declaration merging, when we want to change things in the global scope. But again, it's a funky little feature and it's interesting that it sort of works this way out of the box.