模块 .d.ts

将 JavaScript 与示例 DTS 进行比较

🌐 Comparing JavaScript to an example DTS

常见的 CommonJS 模式

🌐 Common CommonJS Patterns

使用 CommonJS 模式的模块使用 module.exports 来描述导出的值。例如，下面是一个导出函数和数值常量的模块：

🌐 A module using CommonJS patterns uses module.exports to describe the exported values. For example, here is a module which exports a function and a numerical constant:

js
const maxInterval = 12;
function getArrayLength(arr) {
  return arr.length;
}
module.exports = {
  getArrayLength,
  maxInterval,
};

这可以用以下 .d.ts 来描述：

🌐 This can be described by the following .d.ts:

ts
export function getArrayLength(arr: any[]): number;
export const maxInterval: 12;

TypeScript 游乐场可以为你显示 JavaScript 代码的 .d.ts 等效内容。你可以在这里 亲自尝试。

🌐 The TypeScript playground can show you the .d.ts equivalent for JavaScript code. You can try it yourself here.

.d.ts 语法故意看起来像 ES 模块 语法。ES 模块在 2015 年被 TC39 作为 ES2015（ES6）的一部分批准，虽然早已可以通过转译器使用，但如果你的 JavaScript 代码库使用 ES 模块：

🌐 The .d.ts syntax intentionally looks like ES Modules syntax. ES Modules was ratified by TC39 in 2015 as part of ES2015 (ES6), while it has been available via transpilers for a long time, however if you have a JavaScript codebase using ES Modules:

js
export function getArrayLength(arr) {
  return arr.length;
}

这将具有以下 .d.ts 等效项：

🌐 This would have the following .d.ts equivalent:

ts
export function getArrayLength(arr: any[]): number;

默认导出

🌐 Default Exports

在 CommonJS 中，你可以导出任何值作为默认导出，例如这里是一个正则表达式模块：

🌐 In CommonJS you can export any value as the default export, for example here is a regular expression module:

js
module.exports = /hello( world)?/;

可以用以下 .d.ts 来描述：

🌐 Which can be described by the following .d.ts:

ts
declare const helloWorld: RegExp;
export = helloWorld;

或者一个数字：

🌐 Or a number:

js
module.exports = 3.142;

ts
declare const pi: number;
export = pi;

在 CommonJS 中，一种导出方式是导出一个函数。因为函数本身也是一个对象，所以可以添加额外的属性，并且这些属性也会包含在导出中。

🌐 One style of exporting in CommonJS is to export a function. Because a function is also an object, then extra fields can be added and are included in the export.

js
function getArrayLength(arr) {
  return arr.length;
}
getArrayLength.maxInterval = 12;
module.exports = getArrayLength;

可以描述为：

🌐 Which can be described with:

ts
declare function getArrayLength(arr: any[]): number;
declare namespace getArrayLength {
  declare const maxInterval: 12;
}
export = getArrayLength;

有关其工作原理的详细信息，请参见 Module: Functions，以及 Modules reference 页面。

🌐 See Module: Functions for details of how that works, and the Modules reference page.

处理大量引用导入

🌐 Handling Many Consuming Import

在现代引用代码中有多种方式导入模块：

🌐 There are many ways to import a module in modern consuming code:

ts
const fastify = require("fastify");
const { fastify } = require("fastify");
import fastify = require("fastify");
import * as Fastify from "fastify";
import { fastify, FastifyInstance } from "fastify";
import fastify from "fastify";
import fastify, { FastifyInstance } from "fastify";

涵盖所有这些情况需要 JavaScript 代码实际支持所有这些模式。为了支持许多这些模式，一个 CommonJS 模块可能需要如下所示：

🌐 Covering all of these cases requires the JavaScript code to actually support all of these patterns. To support many of these patterns, a CommonJS module would need to look something like:

js
class FastifyInstance {}
function fastify() {
  return new FastifyInstance();
}
fastify.FastifyInstance = FastifyInstance;
// Allows for { fastify }
fastify.fastify = fastify;
// Allows for strict ES Module support
fastify.default = fastify;
// Sets the default export
module.exports = fastify;

模块中的类型

🌐 Types in Modules

你可能想为 JavaScript 代码提供一个不存在的类型

🌐 You may want to provide a type for JavaScript code which does not exist

js
function getArrayMetadata(arr) {
  return {
    length: getArrayLength(arr),
    firstObject: arr[0],
  };
}
module.exports = {
  getArrayMetadata,
};

这可以描述为：

🌐 This can be described with:

ts
export type ArrayMetadata = {
  length: number;
  firstObject: any | undefined;
};
export function getArrayMetadata(arr: any[]): ArrayMetadata;

这个例子是一个使用泛型来提供更丰富类型信息的好案例：

🌐 This example is a good case for using generics to provide richer type information:

ts
export type ArrayMetadata<ArrType> = {
  length: number;
  firstObject: ArrType | undefined;
};
export function getArrayMetadata<ArrType>(
  arr: ArrType[]
): ArrayMetadata<ArrType>;

现在数组的类型会传播到 ArrayMetadata 类型中。

🌐 Now the type of the array propagates into the ArrayMetadata type.

被导出的类型随后可以被模块的使用者重新使用，无论是在 TypeScript 代码中使用 import 或 import type，还是通过 JSDoc 导入。

🌐 The types which are exported can then be re-used by consumers of the modules using either import or import type in TypeScript code or JSDoc imports.

模块代码中的命名空间

🌐 Namespaces in Module Code

尝试描述 JavaScript 代码的运行时关系可能很棘手。当类似 ES 模块的语法没有提供足够的工具来描述导出时，你可以使用 namespaces。

🌐 Trying to describe the runtime relationship of JavaScript code can be tricky. When the ES Module-like syntax doesn’t provide enough tools to describe the exports then you can use namespaces.

例如，你可能有足够复杂的类型需要描述，因此你选择将它们放在你的 .d.ts 命名空间中：

🌐 For example, you may have complex enough types to describe that you choose to namespace them inside your .d.ts:

ts
// This represents the JavaScript class which would be available at runtime
export class API {
  constructor(baseURL: string);
  getInfo(opts: API.InfoRequest): API.InfoResponse;
}
// This namespace is merged with the API class and allows for consumers, and this file
// to have types which are nested away in their own sections.
declare namespace API {
  export interface InfoRequest {
    id: string;
  }
  export interface InfoResponse {
    width: number;
    height: number;
  }
}

要了解 .d.ts 文件中命名空间的工作原理，请阅读 .d.ts 深入解析。

🌐 To understand how namespaces work in .d.ts files read the .d.ts deep dive.

可选的全局用法

🌐 Optional Global Usage

你可以使用 export as namespace 来声明你的模块将在 UMD 环境中以全局作用域可用：

🌐 You can use export as namespace to declare that your module will be available in the global scope in UMD contexts:

ts
export as namespace moduleName;

参考范例

🌐 Reference Example

为了让你了解所有这些部分如何结合在一起，这里提供一个参考 .d.ts，可以在创建新模块时使用

🌐 To give you an idea of how all these pieces can come together, here is a reference .d.ts to start with when making a new module

ts
// Type definitions for [~THE LIBRARY NAME~] [~OPTIONAL VERSION NUMBER~]
// Project: [~THE PROJECT NAME~]
// Definitions by: [~YOUR NAME~] <[~A URL FOR YOU~]>
/*~ This is the module template file. You should rename it to index.d.ts
 *~ and place it in a folder with the same name as the module.
 *~ For example, if you were writing a file for "super-greeter", this
 *~ file should be 'super-greeter/index.d.ts'
 */
/*~ If this module is a UMD module that exposes a global variable 'myLib' when
 *~ loaded outside a module loader environment, declare that global here.
 *~ Otherwise, delete this declaration.
 */
export as namespace myLib;
/*~ If this module exports functions, declare them like so.
 */
export function myFunction(a: string): string;
export function myOtherFunction(a: number): number;
/*~ You can declare types that are available via importing the module */
export interface SomeType {
  name: string;
  length: number;
  extras?: string[];
}
/*~ You can declare properties of the module using const, let, or var */
export const myField: number;

库文件布局

🌐 Library file layout

声明文件的布局应该反映库的布局。

🌐 The layout of your declaration files should mirror the layout of the library.

一个库可以由多个模块组成，例如

🌐 A library can consist of multiple modules, such as

myLib
  +---- index.js
  +---- foo.js
  +---- bar
         +---- index.js
         +---- baz.js

这些可以导入为

🌐 These could be imported as

js
var a = require("myLib");
var b = require("myLib/foo");
var c = require("myLib/bar");
var d = require("myLib/bar/baz");

因此，你的声明文件应该是

🌐 Your declaration files should thus be

@types/myLib
  +---- index.d.ts
  +---- foo.d.ts
  +---- bar
         +---- index.d.ts
         +---- baz.d.ts

测试你的类型

🌐 Testing your types

如果你计划将这些更改提交给 DefinitelyTyped 以供所有人使用，那么我们建议你：

🌐 If you are planning on submitting these changes to DefinitelyTyped for everyone to also use, then we recommend you:

1. 在 node_modules/@types/[libname] 中创建一个新文件夹
2. 在该文件夹中创建一个 index.d.ts，并复制示例
3. 查看模块使用时出现问题的地方，并开始填写 index.d.ts
4. 当你满意后，克隆 DefinitelyTyped/DefinitelyTyped 并按照 README 中的说明操作。

否则

🌐 Otherwise

1. 在你的源码树根目录下创建一个新文件：[libname].d.ts
2. 添加 declare module "[libname]" { }
3. 在 declare module 的大括号内添加模板，然后查看你的使用哪里出现问题