轉(zhuǎn)載 ## 如何創(chuàng)建高質(zhì)量的TypeScript聲明文件(二)
繼續(xù)上篇文章[如何創(chuàng)建高質(zhì)量的TypeScript聲明文件(一)]
模塊化庫
有些庫只能在模塊加載器環(huán)境中工作凹蜂。 例如症杏,因為express僅適用于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");
您通常會看到模塊化庫在其文檔中包含以下行之一:
var someLib = require('someLib');
或
define(..., ['someLib'], function(someLib) {
});
與全局模塊一樣,您可能會在UMD模塊的文檔中看到這些示例东囚,因此請務(wù)必查看代碼或文檔跺嗽。
從代碼中識別模塊庫
模塊化庫通常至少具有以下某些功能:
- 無條件調(diào)用require或define
- import * as a from 'b'的聲明,或export c;
- 對exports或module.exports的賦值
他們很少會:
- 分配window或global的屬性
模塊化庫的示例
許多流行的Node.js庫都在模塊系列中页藻,例如express桨嫁,gulp和request。
UMD
UMD模塊可以用作模塊(通過導(dǎo)入)份帐,也可以用作全局模塊(在沒有模塊加載器的環(huán)境中運行)璃吧。 許多流行的庫,如Moment.js废境,都是以這種方式編寫的畜挨。 例如筒繁,在Node.js中或使用RequireJS,您可以編寫:
import moment = require("moment");
console.log(moment.format());
而在vanilla瀏覽器環(huán)境中巴元,你會寫:
console.log(moment.format());
識別UMD庫
UMD模塊檢查是否存在模塊加載器環(huán)境毡咏。 這是一個易于查看的模式,看起來像這樣:
(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的測試血当,特別是在文件的頂部,它幾乎總是一個UMD庫禀忆。
UMD庫的文檔通常還會演示一個"Using in Node.js"示例臊旭,其中顯示了require,以及一個"Using in the browser"示例箩退,該示例顯示了使用<script>
標(biāo)記加載腳本离熏。
UMD庫的示例
大多數(shù)流行的庫現(xiàn)在都可以作為UMD包使用。 示例包括jQuery戴涝,Moment.js滋戳,lodash等等。
模板
模塊有三個模板啥刻,module.d.ts奸鸯,module-class.d.ts和module-function.d.ts。
如果您的模塊可以像函數(shù)一樣被調(diào)用可帽,請使用module-function.d.ts:
var x = require("foo");
// Note: calling 'x' as a function
var y = x(42);
請務(wù)必閱讀腳注"ES6對模塊調(diào)用簽名的影響"
如果您的模塊可以使用new構(gòu)建娄涩,請使用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)造映跟,請使用module.d.ts文件蓄拣。
未完待續(xù)...