TypeScript命名空間合并講解

更新時間：2021年12月30日 10:37:22 作者：LBJ

這篇文章主要介紹了TS命名空間合并講解，回顧上一節(jié)的內(nèi)容，在上一節(jié)中我們介紹了TS中最常見的聲明合并：接口合并，今天要講的內(nèi)容也是TS中的聲明合并，但這次是命名空間相關(guān)的合并,需要的朋友可以參考一下

而接口合并的合并需要里面的成員是否有函數(shù)成員。對于里頭的函數(shù)成員來說，每個同名函數(shù)聲明都會被當(dāng)成這個函數(shù)的一個重載，當(dāng)接口 A與后來的接口 A合并時，后面的接口具有更高的優(yōu)先級

今天要講的內(nèi)容也是TS中的聲明合并，但這次是命名空間相關(guān)的合并

主要分兩方面來講，一是同名的命名空間之間的合并，二是命名空間和其他類型的合并。下面會一一講述

同名的命名空間之間的合并

與接口合并相類似，兩個或多個同名的命名空間也會合并其成員

那具體怎么合并呢？

對于同名的命名空間之間的合并，記住一下4點(diǎn)：

里頭模塊導(dǎo)出的同名接口會合并為一個接口
對于非導(dǎo)出成員,僅在其原有的（合并前的）命名空間內(nèi)可見。也就是說合并之后，從其它命名空間合并進(jìn)來的成員無法訪問非導(dǎo)出成員
對于里頭值的合并，如果里頭值的名字相同，那么后來的命名空間的值會優(yōu)先級會更高
對于沒有沖突的成員，會直接混入

例如：

namespace Animals {
    export class Cat { }
}

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

等同于：

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

    export class Cat { }
    export class Dog { }
}

上述例子中，兩個同名的命名空間Animals，最終合并為一個命名空間，而且結(jié)果是三個沒有沖突的東西，直接混合在一起了

命名空間和其他類型的合并

命名空間可以與其它類型的聲明進(jìn)行合并，比如與類和函數(shù)，比如和枚舉類型

合并同名的命名空間和類

例如：

class Album {
    label: Album.AlbumLabel;
}
namespace Album {
    export class AlbumLabel { }//導(dǎo)出 `AlbumLabel`類，好讓合并的類能訪問
}

命名空間和類的合并，結(jié)果是一個類并帶有一個內(nèi)部類

合并同名的命名空間和函數(shù)

除了上述的內(nèi)部類的模式，你在JavaScript里，創(chuàng)建一個函數(shù)稍后擴(kuò)展它增加一些屬性也是很常見的。 TypeScript使用聲明合并來達(dá)到這個目的并保證類型安全

例如官方的一個例子：

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"));

同名的命名空間和枚舉

可以用來擴(kuò)展枚舉，還是看官方給的例子吧

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;
        }
    }
}