global-plugin.d.ts

    在纯浏览器环境中,你可以这样使用:

    UMD 模块会检查运行环境中是否存在模块加载器。 这是一种常见模式,示例如下:

    1. (function (root, factory) {
    2. if (typeof define === "function" && define.amd) {
    3. define(["libName"], factory);
    4. } else if (typeof module === "object" && module.exports) {
    5. module.exports = factory(require("libName"));
    6. } else {
    7. root.returnExports = factory(root.libName);
    8. }
    9. }(this, function (b) {

    如果你看到代码库中存在类如typeof definetypeof windowtypeof module的检测代码,尤其是在文件的顶端,那么它大概率是 UMD 代码库。

    在 UMD 模块的文档中经常会提供在 Node.js 中结合require使用的示例,以及在浏览器中结合<script>标签使用的示例。

    UMD 代码库的示例

    大多数流行的代码库均提供了 UMD 格式的包。 例如,jQuery,和lodash等。

    模版

    针对模块,共存在三个模版。它们是:

    若一个模块可以当作函数调用,则使用module-function.d.ts

    1. var x = require('foo');
    2. // Note: calling 'x' as a function
    3. var y = x(42);

    请务必阅读。

    如果一个模块可以使用new来构造,则使用module-class.d.ts

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

    请务必阅读,它同样适用于这类模块。

    如果一个模块既不可以调用,又不可以构造,那么就使用module.d.ts

    模块插件或 UMD 插件

    模块插件会改变其它模块的结构(包含 UMD 或 ES 模块)。 例如,在 Moment.js 中,moment-range会将range方法添加到moment对象上。

    模版

    使用模版。

    全局插件是一段全局代码,它会改变某个全局变量。 对于修改了全局作用域的模块,它会增加出现运行时冲突的可能性。

    例如,有些库会向Array.prototypeString.prototype中增加新的函数。

    全局插件通常可以根据其文档来识别。

    你会看到如下示例:

    1. var x = 'hello, world';
    2. // Creates new methods on built-in types
    3. console.log(x.startsWithHello());
    4. // Creates new methods on built-in types
    5. console.log(y.reverseAndSort());

    模版

    使用模版。

    修改了全局作用域的模块

    对于修改了全局作用域的模块来讲,在导入它们时,会对全局作用域中的值进行修改。 比如存在某个代码库,当导入它时,它会向String.prototype上添加新的成员。 该模式存在危险,因为它有导致运行时冲突的可能性, 但我们仍然可以为其编写声明文件。

    识别出修改了全局作用域的模块

    我们可以通过文档来识别修改了全局作用域的模块。 通常来讲,它们与全局插件类似,但是需要require语句来激活对全局作用域的修改。

    你可能看到过如下的文档:

    模版

    使用模版。

    你的代码库可能会有若干种依赖。 本节会介绍如何在声明文件中导入它们。

    如果你的代码库依赖于某个全局代码库,则使用/// <reference types="..." />指令:

    1. /// <reference types="someLib" />
    2. function getThing(): someLib.thing;

    对模块的依赖

    1. import * as moment from 'moment';
    2. function getThing(): moment;

    对 UMD 模块的依赖

    全局代码库

    如果你的全局代码库依赖于某个 UMD 模块,则使用/// <reference types指令:

    1. /// <reference types="moment" />
    2. function getThing(): moment;

    ES 模块或 UMD 模块代码库

    如果你的模块或 UMD 代码库依赖于某个 UMD 代码库,则使用import语句:

    1. import * as someLib from 'someLib';

    不要使用/// <reference指令来声明对 UMD 代码库的依赖。

    脚注

    防止命名冲突

    注意,虽说可以在全局作用域内定义许多类型。 但我们强烈建议不要这样做,因为当一个工程中存在多个声明文件时,它可能会导致难以解决的命名冲突。

    可以遵循的一个简单规则是使用代码库提供的某个全局变量来声明拥有命名空间的类型。 例如,如果代码库提供了全局变量cats,那么可以这样写:

    1. declare namespace cats {
    2. interface KittySettings {}
    3. }

    而不是:

    这样做会保证代码库可以被转换成 UMD 模块,且不会影响声明文件的使用者。

    一些插件会对已有模块的顶层导出进行添加或修改。 这在 CommonJS 以及其它模块加载器里是合法的,但 ES6 模块是不可改变的,因此该模式是不可行的。 因为,TypeScript 是模块加载器无关的,所以在编译时不会对该行为加以限制,但是开发者若想要转换到 ES6 模块加载器则需要注意这一点。

    ES6 对模块调用签名的影响

    许多代码库,如 Express,将自身导出为可调用的函数。 例如,Express 的典型用法如下:

    1. import exp = require('express');
    2. var app = exp();

    在 ES6 模块加载器中,顶层对象(此例中就exp)只能拥有属性; 顶层的模块对象永远不能够被调用。 最常见的解决方案是为可调用的/可构造的对象定义一个default导出; 有些模块加载器会自动检测这种情况并且将顶层对象替换为default导出。

    声明文件的结构应该反映代码库源码的结构。

    一个代码库可以包含多个模块,比如:

    1. myLib
    2. +---- index.js
    3. +---- foo.js
    4. +---- bar
    5. +---- index.js
    6. +---- baz.js
    1. var a = require('myLib');
    2. var c = require('myLib/bar');
    3. var d = require('myLib/bar/baz');

    声明文件如下:

    1. @types/myLib
    2. +---- index.d.ts
    3. +---- foo.d.ts
    4. +---- bar
    5. +---- index.d.ts
    6. +---- baz.d.ts
    1. // Type definitions for [~THE LIBRARY NAME~] [~OPTIONAL VERSION NUMBER~]
    2. // Project: [~THE PROJECT NAME~]
    3. // Definitions by: [~YOUR NAME~] <[~A URL FOR YOU~]>
    4. /*~ This template shows how to write a global plugin. */
    5. /*~ Write a declaration for the original type and add new members.
    6. *~ For example, this adds a 'toBinaryString' method with overloads to
    7. *~ the built-in number type.
    8. */
    9. interface Number {
    10. toBinaryString(opts?: MyLibrary.BinaryFormatOptions): string;
    11. toBinaryString(
    12. callback: MyLibrary.BinaryFormatCallback,
    13. opts?: MyLibrary.BinaryFormatOptions
    14. ): string;
    15. }
    16. /*~ If you need to declare several types, place them inside a namespace
    17. *~ to avoid adding too many things to the global namespace.
    18. */
    19. declare namespace MyLibrary {
    20. type BinaryFormatCallback = (n: number) => string;
    21. interface BinaryFormatOptions {
    22. prefix?: string;
    23. padding: number;
    24. }