TypeScript namespace merging explained

Preface:
Reviewing the content of the previous section, in the previous section we introduced the most common declaration merging in TS: interface merging

We understand that declaration merging actually means that the compiler will merge declarations with the same name into one declaration. The result of the merging is that the merged declaration will have the characteristics of the original two or more declarations at the same time.

The interface merge requires whether the members inside have function members. For the function members inside, each function declaration with the same name will be treated as an overload of this function. When interface A is merged with the later interface A, the latter interface has a higher priority.

Today we are also going to talk about declaration merging in TS, but this time it is about namespace-related merging

There are two main aspects: one is the merging of namespaces with the same name, and the other is the merging of namespaces with other types. The following will describe one by one

Merge namespaces with the same name

Similar to interface merging, two or more namespaces with the same name will also have their members merged.

So how do we merge it specifically?

When merging namespaces with the same name, remember the following four points:

• The interfaces with the same name exported by the module will be merged into one interface
• Non-exported members are visible only within their original (pre-merge) namespace. That is to say, after the merge, members merged from other namespaces cannot access non-exported members.
• For the merging of values, if the names of the values ​​are the same, the value of the later namespace will have a higher priority.
• For members without conflicts, they will be directly mixed in
  

For example:

namespace Animals {
    export class Cat { }
}

namespace Animals {
    export interface Legged { numberOfLegs: number; }
    export class Dog { }
}

is equivalent to:

namespace Animals {
    export interface Legged { numberOfLegs: number; }

    export class Cat { }
    export class Dog { }
}

In the above example, two namespaces with the same name, Animals , are eventually merged into one namespace, and the result is that three non-conflicting things are directly mixed together.

Namespaces and other types of merging

Namespaces can be combined with other types of declarations, such as classes and functions, and enumeration types.

Merge namespaces and classes with the same name

For example:

class Album {
    label: Album.AlbumLabel;
}
namespace Album {
    export class AlbumLabel { } // Export the `AlbumLabel` class so that the merged class can access it }

The merger of a namespace and a class results in a class with an inner class

Merge namespaces and functions with the same name

In addition to the inner class pattern described above, it is also common in JavaScript to create a function and later extend it to add some properties. TypeScript uses declaration merging to achieve this and ensure type safety.

For example, an official example:

function buildLabel(name: string): string {
    return buildLabel.prefix + name + buildLabel.suffix;
}

namespace buildLabel {
    export let suffix = "";
    export let prefix = "Hello, ";
}

console.log(buildLabel("Sam Smith"));

Namespace and enumeration with the same name

It can be used to expand enumerations. Let’s look at the official examples.

enum Color {
    red = 1,
    green = 2,
    blue = 4
}

namespace Color {
    export function mixColor(colorName: string) {
        if (colorName == "yellow") {
            return Color.red + Color.green;
        }
        else if (colorName == "white") {
            return Color.red + Color.green + Color.blue;
        }
        else if (colorName == "magenta") {
            return Color.red + Color.blue;
        }
        else if (colorName == "cyan") {
            return Color.green + Color.blue;
        }
    }
}

Notice:
Not everything can be merged. Note that classes cannot be merged with other classes or variables.

This is the end of this article about TS namespace merging. For more information about TS namespace merging, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!