A UMD module is one that can either be used as module (through an import), or as a global (when run in an environment without a module loader).\nMany popular libraries, such as Moment.js, are written this way.\nFor example, in Node.js or using RequireJS, you would write:
\n\ntsimport moment = require(\"moment\");\nconsole.log(moment.format());
whereas in a vanilla browser environment you would write:
\n\njsconsole.log(moment.format());
UMD modules check for the existence of a module loader environment.\nThis is an easy-to-spot pattern that looks something like this:
\n\njs(function (root, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"libName\"], factory);\n } else if (typeof module === \"object\" && module.exports) {\n module.exports = factory(require(\"libName\"));\n } else {\n root.returnExports = factory(root.libName);\n }\n}(this, function (b) {
If you see tests for typeof define, typeof window, or typeof module in the code of a library, especially at the top of the file, it’s almost always a UMD library.
Documentation for UMD libraries will also often demonstrate a “Using in Node.js” example showing require,\nand a “Using in the browser” example showing using a <script> tag to load the script.
Most popular libraries are now available as UMD packages.\nExamples include jQuery, Moment.js, lodash, and many more.
\nThere are three templates available for modules,\nmodule.d.ts, module-class.d.ts and module-function.d.ts.
Use module-function.d.ts if your module can be called like a function:
\njsvar x = require(\"foo\");\n// Note: calling 'x' as a function\nvar y = x(42);
Be sure to read the footnote “The Impact of ES6 on Module Call Signatures”
\nUse module-class.d.ts if your module can be constructed using new:
\njsvar x = require(\"bar\");\n// Note: using 'new' operator on the imported variable\nvar y = new x(\"hello\");
The same footnote applies to these modules.
\nIf your module is not callable or constructable, use the module.d.ts file.
A module plugin changes the shape of another module (either UMD or module).\nFor example, in Moment.js, moment-range adds a new range method to the moment object.
For the purposes of writing a declaration file, you’ll write the same code whether the module being changed is a plain module or UMD module.
\nUse the module-plugin.d.ts template.
A global plugin is global code that changes the shape of some global.\nAs with global-modifying modules, these raise the possibility of runtime conflict.
\nFor example, some libraries add new functions to Array.prototype or String.prototype.
Global plugins are generally easy to identify from their documentation.
\nYou’ll see examples that look like this:
\n\njsvar x = \"hello, world\";\n// Creates new methods on built-in types\nconsole.log(x.startsWithHello());\n\nvar y = [1, 2, 3];\n// Creates new methods on built-in types\nconsole.log(y.reverseAndSort());
Use the global-plugin.d.ts template.
A global-modifying module alters existing values in the global scope when they are imported.\nFor example, there might exist a library which adds new members to String.prototype when imported.\nThis pattern is somewhat dangerous due to the possibility of runtime conflicts,\nbut we can still write a declaration file for it.
Global-modifying modules are generally easy to identify from their documentation.\nIn general, they’re similar to global plugins, but need a require call to activate their effects.
You might see documentation like this:
\n\njs// 'require' call that doesn't use its return value\nvar unused = require(\"magic-string-time\");\n/* or */\nrequire(\"magic-string-time\");\n\nvar x = \"hello, world\";\n// Creates new methods on built-in types\nconsole.log(x.startsWithHello());\n\nvar y = [1, 2, 3];\n// Creates new methods on built-in types\nconsole.log(y.reverseAndSort());
Use the global-modifying-module.d.ts template.
There are several kinds of dependencies your library might have.\nThis section shows how to import them into the declaration file.
\nIf your library depends on a global library, use a /// <reference types=\"...\" /> directive:
\nts/// <reference types=\"someLib\" />\n\nfunction getThing(): someLib.thing;
If your library depends on a module, use an import statement:
\ntsimport * as moment from \"moment\";\n\nfunction getThing(): moment;
If your global library depends on a UMD module, use a /// <reference types directive:
\nts/// <reference types=\"moment\" />\n\nfunction getThing(): moment;
If your module or UMD library depends on a UMD library, use an import statement:
\ntsimport * as someLib from \"someLib\";
Do not use a /// <reference directive to declare a dependency to a UMD library!
Note that it’s possible to define many types in the global scope when writing a global declaration file.\nWe strongly discourage this as it leads to possible unresolvable name conflicts when many declaration files are in a project.
\nA simple rule to follow is to only declare types namespaced by whatever global variable the library defines.\nFor example, if the library defines the global value ‘cats’, you should write
\n\ntsdeclare namespace cats {\n interface KittySettings {}\n}
But not
\n\nts// at top-level\ninterface CatsKittySettings {}
This guidance also ensures that the library can be transitioned to UMD without breaking declaration file users.
\nSome plugins add or modify top-level exports on existing modules.\nWhile this is legal in CommonJS and other loaders, ES6 modules are considered immutable and this pattern will not be possible.\nBecause TypeScript is loader-agnostic, there is no compile-time enforcement of this policy, but developers intending to transition to an ES6 module loader should be aware of this.
\nMany popular libraries, such as Express, expose themselves as a callable function when imported.\nFor example, the typical Express usage looks like this:
\n\ntsimport exp = require(\"express\");\nvar app = exp();
In ES6 module loaders, the top-level object (here imported as exp) can only have properties;\nthe top-level module object is never callable.\nThe most common solution here is to define a default export for a callable/constructable object;\nsome module loader shims will automatically detect this situation and replace the top-level object with the default export.
The layout of your declaration files should mirror the layout of the library.
\nA library can consist of multiple modules, such as
\nmyLib\n +---- index.js\n +---- foo.js\n +---- bar\n +---- index.js\n +---- baz.js\nThese could be imported as
\n\njsvar a = require(\"myLib\");\nvar b = require(\"myLib/foo\");\nvar c = require(\"myLib/bar\");\nvar d = require(\"myLib/bar/baz\");
Your declaration files should thus be
\n@types/myLib\n +---- index.d.ts\n +---- foo.d.ts\n +---- bar\n +---- index.d.ts\n +---- baz.d.ts\n","headings":[{"value":"UMD","depth":2},{"value":"Identifying a UMD library","depth":3},{"value":"Examples of UMD libraries","depth":3},{"value":"Template","depth":3},{"value":"Module Plugin or UMD Plugin","depth":2},{"value":"Template","depth":3},{"value":"Global Plugin","depth":2},{"value":"Identifying global plugins","depth":3},{"value":"Template","depth":3},{"value":"Global-modifying Modules","depth":2},{"value":"Identifying global-modifying modules","depth":3},{"value":"Template","depth":3},{"value":"Consuming Dependencies","depth":2},{"value":"Dependencies on Global Libraries","depth":2},{"value":"Dependencies on Modules","depth":2},{"value":"Dependencies on UMD libraries","depth":2},{"value":"From a Global Library","depth":3},{"value":"From a Module or UMD Library","depth":3},{"value":"Footnotes","depth":2},{"value":"Preventing Name Conflicts","depth":2},{"value":"The Impact of ES6 on Module Plugins","depth":2},{"value":"The Impact of ES6 on Module Call Signatures","depth":2},{"value":"Library file layout","depth":2}],"frontmatter":{"permalink":"/docs/handbook/declaration-files/templates/global-plugin-d-ts.html","title":"Global: Plugin","disable_toc":null,"oneline":null}},"prev":null,"next":null},"pageContext":{"slug":"/docs/handbook/declaration-files/templates/global-plugin-d-ts.html","repoPath":"/packages/documentation/copy/en/declaration-files/templates/global-plugin.d.ts.md","lang":"en","modifiedTime":"2020-08-07T17:00:36.335Z"}}}ts// Type definitions for [~THE LIBRARY NAME~] [~OPTIONAL VERSION NUMBER~]\n// Project: [~THE PROJECT NAME~]\n// Definitions by: [~YOUR NAME~] <[~A URL FOR YOU~]>\n\n/*~ This template shows how to write a global plugin. */\n\n/*~ Write a declaration for the original type and add new members.\n *~ For example, this adds a 'toBinaryString' method with overloads to\n *~ the built-in number type.\n */\ninterface Number {\n toBinaryString(opts?: MyLibrary.BinaryFormatOptions): string;\n\n toBinaryString(\n callback: MyLibrary.BinaryFormatCallback,\n opts?: MyLibrary.BinaryFormatOptions\n ): string;\n}\n\n/*~ If you need to declare several types, place them inside a namespace\n *~ to avoid adding too many things to the global namespace.\n */\ndeclare namespace MyLibrary {\n type BinaryFormatCallback = (n: number) => string;\n interface BinaryFormatOptions {\n prefix?: string;\n padding: number;\n }\n}