TypeScript基礎入門之聲明合併(一)

轉發 TypeScript基礎入門之聲明合併(一)

聲明合併

介紹

TypeScript中的一些獨特概念描述了類型級別的JavaScript對象的形狀。
TypeScript特別獨特的一個例子是"聲明合併"的概念。
在使用現有JavaScript時，理解此概念將爲您提供優點。
它還爲更高級的抽象概念打開了大門。

出於本文的目的，"聲明合併"意味着編譯器將使用相同名稱聲明的兩個單獨聲明合併到單個定義中。
此合併定義具備兩個原始聲明的功能。
能夠合併任意數量的聲明;
它不只限於兩個聲明。

基本概念

在TypeScript中，聲明在三個組中的至少一箇中建立實體：名稱空間，類型或值。
命名空間建立聲明建立一個命名空間，其中包含使用點符號表示法訪問的名稱。
類型建立聲明就是這樣作的：它們建立一個可使用聲明的形狀顯示並綁定到給定名稱的類型。
最後，建立值的聲明會建立在輸出JavaScript中可見的值。

Declaration Type	Namespace	Type	Value
Namespace	X		X
Class		X	X
Enum		X	X
Interface		X
Type Alias		X
Function			X
Variable			X

瞭解每一個聲明建立的內容將幫助您瞭解執行聲明合併時合併的內容。

合併接口

最簡單，也許是最多見的聲明合併類型是接口合併。
在最基本的層面上，合併機械地將兩個聲明的成員鏈接到具備相同名稱的單個接口。

interface Box {
    height: number;
    width: number;
}

interface Box {
    scale: number;
}

let box: Box = {height: 5, width: 6, scale: 10};

接口的非功能成員應該是惟一的。
若是它們不是惟一的，則它們必須屬於同一類型。
若是接口都聲明瞭具備相同名稱但具備不一樣類型的非函數成員，則編譯器將發出錯誤。

對於函數成員，同名的每一個函數成員都被視爲描述同一函數的重載。
值得注意的是，在接口A與後面的接口A合併的狀況下，第二接口將具備比第一接口更高的優先級。

也就是說，在示例中：

interface Cloner {
    clone(animal: Animal): Animal;
}

interface Cloner {
    clone(animal: Sheep): Sheep;
}

interface Cloner {
    clone(animal: Dog): Dog;
    clone(animal: Cat): Cat;
}

三個接口將合併以建立單個聲明，以下所示：

interface Cloner {
    clone(animal: Dog): Dog;
    clone(animal: Cat): Cat;
    clone(animal: Sheep): Sheep;
    clone(animal: Animal): Animal;
}

請注意，每一個組的元素保持相同的順序，但組自己與稍後排序的後續重載集合在一塊兒。

此規則的一個例外是專門簽名。
若是簽名的參數類型是單個字符串文字類型（例如，不是字符串文字的並集），那麼它將被冒泡到其合併的重載列表的頂部。

例如，如下接口將合併在一塊兒：

interface Document {
    createElement(tagName: any): Element;
}
interface Document {
    createElement(tagName: "div"): HTMLDivElement;
    createElement(tagName: "span"): HTMLSpanElement;
}
interface Document {
    createElement(tagName: string): HTMLElement;
    createElement(tagName: "canvas"): HTMLCanvasElement;
}

由此產生的合併聲明文件將以下:

interface Document {
    createElement(tagName: "canvas"): HTMLCanvasElement;
    createElement(tagName: "div"): HTMLDivElement;
    createElement(tagName: "span"): HTMLSpanElement;
    createElement(tagName: string): HTMLElement;
    createElement(tagName: any): Element;
}

未完待續...