Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Module plugin d ts #101

Merged
merged 2 commits into from
Nov 2, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -4,64 +4,62 @@ layout: docs
permalink: /zh/docs/handbook/declaration-files/templates/module-plugin-d-ts.html
---

For example, when you want to work with JavaScript code which extends another library.
例如,当你想要使用扩展另一个库的 JavaScript 代码时。

```ts
import { greeter } from "super-greeter";

// Normal Greeter API
// 正常的问候 API
greeter(2);
greeter("Hello world");

// Now we extend the object with a new function at runtime
// 现在我们在运行时用一个新函数扩展对象
import "hyper-super-greeter";
greeter.hyperGreet();
```

The definition for "super-greeter":
对于“super-greeter”的定义:

```ts
/*~ This example shows how to have multiple overloads for your function */
/*~ 此示例展示了如何让函数有多个重载 */
export interface GreeterFunction {
(name: string): void
(time: number): void
}

/*~ This example shows how to export a function specified by an interface */
/*~ 此示例展示了如何导出由接口指定的函数 */
export const greeter: GreeterFunction;
```

We can extend the existing module like the following:
我们可以像下面这样扩展现有模块:

```ts
// Type definitions for [~THE LIBRARY NAME~] [~OPTIONAL VERSION NUMBER~]
// Project: [~THE PROJECT NAME~]
// Definitions by: [~YOUR NAME~] <[~A URL FOR YOU~]>
// 类型定义为 [~THE LIBRARY NAME~] [~OPTIONAL VERSION NUMBER~]
// 项目: [~THE PROJECT NAME~]
// 定义者: [~YOUR NAME~] <[~A URL FOR YOU~]>

/*~ This is the module plugin 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'
/*~ 这是模块插件模板文件。你应该将其重命名为 index.d.ts
*~ 并将其放在与模块同名的文件夹中。
*~ 例如,如果你为 "super-greeter" 编写一个文件,此
*~ 文件应该是 'super-greeter/index.d.ts'
*/

/*~ On this line, import the module which this module adds to */
/*~ 在此行上,导入此模块添加的模块 */
import { greeter } from "super-greeter";

/*~ Here, declare the same module as the one you imported above
*~ then we expand the existing declaration of the greeter function
/*~ 在此处,声明与上面导入的模块相同的模块
*~ 然后我们扩展 greeter 函数的现有声明
*/
export module "super-greeter" {
export interface GreeterFunction {
/** Greets even better! */
/** 更好的问候! */
hyperGreet(): void;
}
}
```

This uses [declaration merging](/zh/docs/handbook/declaration-merging.html)
这使用了[声明合并](/zh/docs/handbook/declaration-merging.html)

## The Impact of ES6 on Module Plugins
## ES6 对模块插件的影响

Some plugins add or modify top-level exports on existing modules.
While this is legal in CommonJS and other loaders, ES6 modules are considered immutable and this pattern will not be possible.
Because 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.
有些插件在现有模块上添加或修改顶级导出。虽然这在 CommonJS 和其他加载器中是合法的,但 ES6 模块被认为是不可变的,这种模式将不再可能。由于 TypeScript 是与加载器无关的,因此没有编译时强制执行此策略,但打算迁移到 ES6 模块加载器的开发人员应该注意这一点。
Loading
Loading