TypeScript 名前空間のマージの説明

インターフェースのマージでは、内部のメンバーに関数メンバーがあるかどうかが必要です。内部の関数メンバーについては、同じ名前を持つ各関数宣言がこの関数のオーバーロードとして扱われます。インターフェース A が後のインターフェース A とマージされると、後のインターフェースが優先されます。

今日はTSの宣言のマージについてもお話ししますが、今回は名前空間関連のマージについてです。

主な側面は 2 つあります。1 つは同じ名前の名前空間のマージであり、もう 1 つは他のタイプの名前空間のマージです。以下、一つずつ説明します

同じ名前の名前空間をマージする

インターフェースのマージと同様に、同じ名前を持つ 2 つ以上の名前空間のメンバーもマージされます。

では、具体的にどのように統合するのでしょうか?

同じ名前の名前空間をマージする場合は、次の 4 つの点に注意してください。

モジュールによってエクスポートされた同じ名前のインターフェースは、1つのインターフェースにマージされます。
エクスポートされていないメンバーは、元の (マージ前の) 名前空間内でのみ表示されます。つまり、マージ後、他の名前空間からマージされたメンバーは、エクスポートされていないメンバーにアクセスできなくなります。
値のマージでは、値の名前が同じ場合は、後の方のネームスペースの値が優先されます。
競合のないメンバーは直接混ざります

例えば：

名前空間動物 {
    クラス Cat をエクスポートします { }
}

名前空間動物 {
    エクスポートインターフェース Legged { numberOfLegs: number; }
    クラス Dog をエクスポートします { }
}

は以下と同等です:

名前空間動物 {
    エクスポートインターフェース Legged { numberOfLegs: number; }

    エクスポートクラス Cat { }
    クラス Dog をエクスポートします { }
}

上記の例では、同じ名前Animalsを持つ 2 つの名前空間が最終的に 1 つの名前空間に統合され、結果として競合しない 3 つのものが直接混在することになります。

名前空間とその他の種類のマージ

名前空間は、クラスや関数、列挙型などの他のタイプの宣言と組み合わせることができます。

同じ名前の名前空間とクラスをマージする

例えば：

クラスアルバム{
    ラベル: Album.AlbumLabel;
}
名前空間アルバム {
    export class AlbumLabel { } // マージされたクラスがアクセスできるように `AlbumLabel` クラスをエクスポートします }

名前空間とクラスを統合すると、内部クラスを持つクラスが作成される。

同じ名前の名前空間と関数をマージする

上記の内部クラスパターンに加えて、 JavaScriptでは関数を作成し、後でそれを拡張していくつかのプロパティを追加することも一般的です。 TypeScript宣言のマージを使用してこれを実現し、型の安全性を確保します。

たとえば、公式の例:

関数buildLabel(名前: 文字列): 文字列 {
    buildLabel.prefix + name + buildLabel.suffix を返します。
}

名前空間ビルドラベル {
    エクスポートlet suffix = "";
    エクスポート let prefix = "こんにちは、";
}

console.log(buildLabel("サム・スミス"));

同じ名前を持つ名前空間と列挙

列挙を拡張するために使用できます。公式の例を見てみましょう。

列挙型カラー{
    赤 = 1、
    緑 = 2、
    青 = 4
}

名前空間カラー{
    エクスポート関数mixColor(colorName: 文字列) {
        if (colorName == "黄色") {
            Color.red + Color.green を返します。
        }
        そうでない場合 (colorName == "white") {
            Color.red + Color.green + Color.blue を返します。
        }
        そうでない場合 (colorName == "マゼンタ") {
            Color.red + Color.blue を返します。
        }
        それ以外の場合は (colorName == "シアン") {
            Color.green + Color.blue を返します。
        }
    }
}