Broadly speaking, the way you structure your declaration file depends on how the library is consumed.\nThere are many ways of offering a library for consumption in JavaScript, and you’ll need to write your declaration file to match it.\nThis guide covers how to identify common library patterns, and how to write declaration files which correspond to that pattern.
\nEach type of major library structuring pattern has a corresponding file in the Templates section.\nYou can start with these templates to help you get going faster.
\nFirst, we’ll review the kinds of libraries TypeScript declaration files can represent.\nWe’ll briefly show how each kind of library is used, how it is written, and list some example libraries from the real world.
\nIdentifying the structure of a library is the first step in writing its declaration file.\nWe’ll give hints on how to identify structure both based on its usage and its code.\nDepending on the library’s documentation and organization, one might be easier than the other.\nWe recommend using whichever is more comfortable to you.
\nQuestion to ask yourself while looking at a library you are trying to type.
\nHow do you obtain the library?
\nFor example, can you only get it through npm or only from a CDN?
\nHow would you import it?
\nDoes it add a global object? Does it use require or import/export statements?
Almost every modern Node.js library falls into the module family.\nThese type of libraries only work in a JS environment with a module loader.\nFor example, express only works in Node.js and must be loaded using the CommonJS require function.
ECMAScript 2015 (also known as ES2015, ECMAScript 6, and ES6), CommonJS, and RequireJS have similar notions of importing a module.\nIn JavaScript CommonJS (Node.js), for example, you would write
\n\njsvar fs = require(\"fs\");
In TypeScript or ES6, the import keyword serves the same purpose:
\ntsimport * as fs from \"fs\";
You’ll typically see modular libraries include one of these lines in their documentation:
\n\njsvar someLib = require(\"someLib\");
or
\n\njsdefine(..., ['someLib'], function(someLib) {\n\n});
As with global modules, you might see these examples in the documentation of a UMD module, so be sure to check the code or documentation.
\nModular libraries will typically have at least some of the following:
\nrequire or defineimport * as a from 'b'; or export c;exports or module.exportsThey will rarely have:
\nwindow or globalThere are four templates available for modules,\nmodule.d.ts, module-class.d.ts, module-function.d.ts and module-plugins.d.ts.
You should first read module.d.ts for an overview on the way they all work.
Then use the template module-function.d.ts if your module can be called like a function:
\njsconst x = require(\"foo\");\n// Note: calling 'x' as a function\nconst y = x(42);
Use the template module-class.d.ts if your module can be constructed using new:
\njsconst x = require(\"bar\");\n// Note: using 'new' operator on the imported variable\nconst y = new x(\"hello\");
If you have a module which when imported, makes changes to other modules use template module-plugin.d.ts:
\njsconst jest = require(\"jest\");\nrequire(\"jest-matchers-files\");
A global library is one that can be accessed from the global scope (i.e. without using any form of import).\nMany libraries simply expose one or more global variables for use.\nFor example, if you were using jQuery, the $ variable can be used by simply referring to it:
\nts$(() => {\n console.log(\"hello!\");\n});
You’ll usually see guidance in the documentation of a global library of how to use the library in an HTML script tag:
\n\nhtml<script src=\"http://a.great.cdn.for/someLib.js\"></script>
Today, most popular globally-accessible libraries are actually written as UMD libraries (see below).\nUMD library documentation is hard to distinguish from global library documentation.\nBefore writing a global declaration file, make sure the library isn’t actually UMD.
\nGlobal library code is usually extremely simple.\nA global “Hello, world” library might look like this:
\n\njsfunction createGreeting(s) {\n return \"Hello, \" + s;\n}
or like this:
\n\njs// Web\nwindow.createGreeting = function (s) {\n return \"Hello, \" + s;\n};\n\n// Node\nglobal.createGreeting = function (s) {\n return \"Hello, \" + s;\n};\n\n// Potentially any runtime\nglobalThis.createGreeting = function (s) {\n return \"Hello, \" + s;\n};
When looking at the code of a global library, you’ll usually see:
\nvar statements or function declarationswindow.someNamedocument or window existYou won’t see:
\nrequire or definevar fs = require(\"fs\");define(...)require or import the libraryBecause it’s usually easy to turn a global library into a UMD library, very few popular libraries are still written in the global style.\nHowever, libraries that are small and require the DOM (or have no dependencies) may still be global.
\nThe template file global.d.ts defines an example library myLib.\nBe sure to read the “Preventing Name Conflicts” footnote.
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.
\nUse the module-plugin.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.
\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-compl module loaders, the top-level object (here imported as exp) can only have properties;\nthe top-level module object can never be callable.
The most common solution here is to define a default export for a callable/constructable object;\nmodule loaders commonly detect this situation automatically and replace the top-level object with the default export.\nTypescript can handle this for you, if you have \"esModuleInterop\": true in tsconfig.json.