美文网首页TypeScript基础
如何创建高质量的TypeScript声明文件(二)

如何创建高质量的TypeScript声明文件(二)

作者: 鹏鲲云之上 | 来源:发表于2018-11-05 15:39 被阅读4次

    转载 ## 如何创建高质量的TypeScript声明文件(二)

    继续上篇文章[如何创建高质量的TypeScript声明文件(一)]

    模块化库

    有些库只能在模块加载器环境中工作。 例如,因为express仅适用于Node.js,必须使用CommonJS require函数加载。

    ECMAScript 2015(也称为ES2015,ECMAScript 6和ES6),CommonJS和RequireJS具有类似的导入模块的概念。 例如,在JavaScript CommonJS(Node.js)中,您可以编写

    var fs = require("fs");
    

    在TypeScript或ES6中,import关键字用于相同的目的:

    import fs = require("fs");
    

    您通常会看到模块化库在其文档中包含以下行之一:

    var someLib = require('someLib');
    

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

    与全局模块一样,您可能会在UMD模块的文档中看到这些示例,因此请务必查看代码或文档。

    从代码中识别模块库

    模块化库通常至少具有以下某些功能:

    • 无条件调用require或define
    • import * as a from 'b'的声明,或export c;
    • 对exports或module.exports的赋值

    他们很少会:

    • 分配window或global的属性

    模块化库的示例

    许多流行的Node.js库都在模块系列中,例如express,gulp和request。

    UMD

    UMD模块可以用作模块(通过导入),也可以用作全局模块(在没有模块加载器的环境中运行)。 许多流行的库,如Moment.js,都是以这种方式编写的。 例如,在Node.js中或使用RequireJS,您可以编写:

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

    而在vanilla浏览器环境中,你会写:

    console.log(moment.format());
    

    识别UMD库

    UMD模块检查是否存在模块加载器环境。 这是一个易于查看的模式,看起来像这样:

    (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>标记加载脚本。

    UMD库的示例

    大多数流行的库现在都可以作为UMD包使用。 示例包括jQuery,Moment.js,lodash等等。

    模板

    模块有三个模板,module.d.ts,module-class.d.ts和module-function.d.ts。

    如果您的模块可以像函数一样被调用,请使用module-function.d.ts:

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

    请务必阅读脚注"ES6对模块调用签名的影响"

    如果您的模块可以使用new构建,请使用module-class.d.ts:

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

    同样的脚注适用于这些模块。

    如果您的模块不可调用或可构造,请使用module.d.ts文件。

    未完待续...

    相关文章

      网友评论

        本文标题:如何创建高质量的TypeScript声明文件(二)

        本文链接:https://www.haomeiwen.com/subject/ndpsxqtx.html