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; }
未完待續...