日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 前端文檔 正文

TypeScript命名空間合并講解_javascript技巧

作者：LBJ ? 更新時間： 2022-03-20 前端文檔

前言：
回顧上一節的內容，在上一節中我們介紹了TS中最常見的聲明合并：接口合并

我們從中了解了聲明合并其實指的就是編譯器會針對同名的聲明合并為一個聲明，合并的結果是合并后的聲明會同時擁有原先兩個或多個聲明的特性

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

今天要講的內容也是TS中的聲明合并，但這次是命名空間相關的合并

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

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

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

那具體怎么合并呢？

對于同名的命名空間之間的合并，記住一下4點：

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

例如：

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，最終合并為一個命名空間，而且結果是三個沒有沖突的東西，直接混合在一起了

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

命名空間可以與其它類型的聲明進行合并，比如與類和函數，比如和枚舉類型

合并同名的命名空間和類

例如：

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

命名空間和類的合并，結果是一個類并帶有一個內部類

合并同名的命名空間和函數

除了上述的內部類的模式，你在JavaScript里，創建一個函數稍后擴展它增加一些屬性也是很常見的。 TypeScript使用聲明合并來達到這個目的并保證類型安全

例如官方的一個例子：

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

同名的命名空間和枚舉

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

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

注意：
并不是所有東西都能合并，需要注意：類不能與其它類或變量合并

原文鏈接：https://juejin.cn/post/7035257522646679560

欄目分類
最近更新