1. 程式人生 > >【第9篇】TypeScript宣告合併Merging 案例程式碼詳解

【第9篇】TypeScript宣告合併Merging 案例程式碼詳解

10.1合併interface使用

/**

 * Merging Interfaces

 * 合併介面..

 * 最簡單的,也許是最常見的,型別宣告合併是合併介面。將兩個相同的介面合併在一塊.

 */

interface Box {

    height: number;

    width: number;

}

interface Box {

    scale: number;

}

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

interface Document {

    createElement(tagName: any): Element;

}

interface Document {

    createElement(tagName: string): HTMLElement;

}

interface Document {

    createElement(tagName: "div"): HTMLDivElement; 

    createElement(tagName: "span"): HTMLSpanElement;

    createElement(tagName: "canvas"): HTMLCanvasElement;

}

interface Document {

    createElement(tagName: 

"div"): HTMLDivElement; 

    createElement(tagName: "span"): HTMLSpanElement;

    createElement(tagName: "canvas"): HTMLCanvasElement;

    createElement(tagName: string): HTMLElement;

    createElement(tagName: any): Element;

}

/**

*MergingInterfaces

*合併介面..

*/

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

10.2合併module使用

/**

 * Merging Modules

 * 合併塊.

  *要合併的價值,在每一個網站的宣告,如果一個模組已經給定名稱存在,它進一步採取現有的模組

  *並新增第二個模組第一的出口成員擴充套件。 

  */

module MAnimals {

exportclass Zebra { }

}

module MAnimals {

exportinterface Legged { numberOfLegs: number; }

exportclass Dog { }

}

//---這個MYAnimals塊等同上面兩個module

module MYAnimals {

exportinterface Legged { numberOfLegs: number; }

exportclass Zebra { }

exportclass Dog { }

}

/**

 * 模組合併的這種模式是一個有用的起點,但要得到我們還需要了解同非成員國匯出會發生什麼更完整的場景畫面。

 * 非匯出成員只有原來的(未合併)模組中可見,這意味著合併後,合併的成員,來自其他宣告無法看到非成員匯出

 */

module myAnimal {

var haveMuscles = true;

exportfunction animalsHaveMuscles() {

return haveMuscles;

    }

}

module myAnimal {

exportfunction doAnimalsHaveMuscles() {

//return haveMuscles;  // 這裡這個值是不可以返回.

    }

}

/**

 * Merging Modules with Classes, Functions, and Enums

 * 合併模組與類,函式和列舉

 * 模組具有足夠的靈活性,以也與其它型別的宣告合併。要做到這一點,該模組宣告必須遵循的宣告,將與合併。

 * 由此產生的宣告有兩種申報型別的屬性。在typescript使用這個效能來模擬一些在JavaScript模式以及其它的程式語言

 */

class Album {

    label: Album.AlbumLabel;

}

module Album {

exportclass AlbumLabel { }

}

/**

*MergingModules

*合併塊.

*要合併的價值,在每一個網站的宣告,如果一個模組已經給定名稱存在,它進一步採取現有的模組

*並新增第二個模組第一的出口成員擴充套件。

*/

var MAnimals;

(function (MAnimals) {

var Zebra = (function () {

function Zebra() {

        }

return Zebra;

    })();

    MAnimals.Zebra = Zebra;

})(MAnimals || (MAnimals = {}));

var MAnimals;

(function (MAnimals) {

var Dog = (function () {

function Dog() {

        }

return Dog;

    })();

    MAnimals.Dog = Dog;

})(MAnimals || (MAnimals = {}));

//---這個MYAnimals塊等同上面兩個module

var MYAnimals;

(function (MYAnimals) {

var Zebra = (function () {

function Zebra() {

        }

return Zebra;

    })();

    MYAnimals.Zebra = Zebra;

var Dog = (function () {

function Dog() {

        }

return Dog;

    })();

    MYAnimals.Dog = Dog;

})(MYAnimals || (MYAnimals = {}));

/**

*模組合併的這種模式是一個有用的起點,但要得到我們還需要了解同非成員國匯出會發生什麼更完整的場景畫面。

*非匯出成員只有原來的(未合併)模組中可見,這意味著合併後,合併的成員,來自其他宣告無法看到非成員匯出

*/

var myAnimal;

(function (myAnimal) {

var haveMuscles = true;

function animalsHaveMuscles() {

return haveMuscles;

    }

    myAnimal.animalsHaveMuscles = animalsHaveMuscles;

})(myAnimal || (myAnimal = {}));

var myAnimal;

(function (myAnimal) {

function doAnimalsHaveMuscles() {

//return haveMuscles;  // 這裡這個值是不可以返回.

    }

    myAnimal.doAnimalsHaveMuscles = doAnimalsHaveMuscles;

})(myAnimal || (myAnimal = {}));

/**

*MergingModuleswithClasses,Functions,andEnums

*合併模組與類,函式和列舉

*

*模組具有足夠的靈活性,以也與其它型別的宣告合併。要做到這一點,該模組宣告必須遵循的宣告,將與合併。

*由此產生的宣告有兩種申報型別的屬性。在typescript使用這個效能來模擬一些在JavaScript模式以及其它的程式語言

*/

var Album = (function () {

function Album() {

    }

return Album;

})();

var Album;

(function (Album) {

var AlbumLabel = (function () {

function AlbumLabel() {

        }

return AlbumLabel;

    })();

    Album.AlbumLabel = AlbumLabel;

})(Album || (Album = {}));