如何創(chuàng)建高質(zhì)量的TypeScript聲明文件(二)

轉(zhuǎn)載 ## 如何創(chuàng)建高質(zhì)量的TypeScript聲明文件(二)

繼續(xù)上篇文章[如何創(chuàng)建高質(zhì)量的TypeScript聲明文件(一)]

模塊化庫

有些庫只能在模塊加載器環(huán)境中工作。 例如,因?yàn)閑xpress僅適用于Node.js,必須使用CommonJS require函數(shù)加載。

ECMAScript 2015(也稱為ES2015,ECMAScript 6和ES6),CommonJS和RequireJS具有類似的導(dǎo)入模塊的概念。 例如,在JavaScript CommonJS(Node.js)中,您可以編寫

var fs = require("fs");

在TypeScript或ES6中,import關(guān)鍵字用于相同的目的:

import fs = require("fs");

您通常會(huì)看到模塊化庫在其文檔中包含以下行之一:

var someLib = require('someLib');

define(..., ['someLib'], function(someLib) {

});

與全局模塊一樣,您可能會(huì)在UMD模塊的文檔中看到這些示例,因此請(qǐng)務(wù)必查看代碼或文檔。

從代碼中識(shí)別模塊庫

模塊化庫通常至少具有以下某些功能:

  • 無條件調(diào)用require或define
  • import * as a from 'b'的聲明,或export c;
  • 對(duì)exports或module.exports的賦值

他們很少會(huì):

  • 分配window或global的屬性

模塊化庫的示例

許多流行的Node.js庫都在模塊系列中,例如express,gulp和request。

UMD

UMD模塊可以用作模塊(通過導(dǎo)入),也可以用作全局模塊(在沒有模塊加載器的環(huán)境中運(yùn)行)。 許多流行的庫,如Moment.js,都是以這種方式編寫的。 例如,在Node.js中或使用RequireJS,您可以編寫:

import moment = require("moment");
console.log(moment.format());

而在vanilla瀏覽器環(huán)境中,你會(huì)寫:

console.log(moment.format());

識(shí)別UMD庫

UMD模塊檢查是否存在模塊加載器環(huán)境。 這是一個(gè)易于查看的模式,看起來像這樣:

(function (root, factory) {
    if (typeof define === "function" && define.amd) {
        define(["libName"], factory);
    } else if (typeof module === "object" && module.exports) {
        module.exports = factory(require("libName"));
    } else {
        root.returnExports = factory(root.libName);
    }
}(this, function (b) {

如果您在庫的代碼中看到typeof define,typeof window或typeof module的測(cè)試,特別是在文件的頂部,它幾乎總是一個(gè)UMD庫。

UMD庫的文檔通常還會(huì)演示一個(gè)"Using in Node.js"示例,其中顯示了require,以及一個(gè)"Using in the browser"示例,該示例顯示了使用<script>標(biāo)記加載腳本。

UMD庫的示例

大多數(shù)流行的庫現(xiàn)在都可以作為UMD包使用。 示例包括jQuery,Moment.js,lodash等等。

模板

模塊有三個(gè)模板,module.d.ts,module-class.d.ts和module-function.d.ts。

如果您的模塊可以像函數(shù)一樣被調(diào)用,請(qǐng)使用module-function.d.ts:

var x = require("foo");
// Note: calling 'x' as a function
var y = x(42);

請(qǐng)務(wù)必閱讀腳注"ES6對(duì)模塊調(diào)用簽名的影響"

如果您的模塊可以使用new構(gòu)建,請(qǐng)使用module-class.d.ts:

var x = require("bar");
// Note: using 'new' operator on the imported variable
var y = new x("hello");

同樣的腳注適用于這些模塊。

如果您的模塊不可調(diào)用或可構(gòu)造,請(qǐng)使用module.d.ts文件。

未完待續(xù)...

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容