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

init translation of global.d.ts #103

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
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
117 changes: 21 additions & 96 deletions docs/documentation/zh/declaration-files/templates/global.d.ts.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ layout: docs
permalink: /zh/docs/handbook/declaration-files/templates/global-d-ts.html
---

## Global Libraries
## 全局库

<!--
TODO:
Expand All @@ -17,128 +17,53 @@ TODO:

-->

A _global_ library is one that can be accessed from the global scope (i.e. without using any form of `import`).
Many libraries simply expose one or more global variables for use.
For example, if you were using [jQuery](https://jquery.com/), the `$` variable can be used by simply referring to it:
全局库是可以从全局范围访问的库(即不使用任何形式的 `import`)。许多库只是简单地公开一个或多个全局变量供使用。例如,如果你正在使用 [jQuery](https://jquery.com/),则可以通过简单地引用 `$` 变量来使用:

```ts
$(() => {
console.log("hello!");
console.log("你好!");
});
```

You'll usually see guidance in the documentation of a global library of how to use the library in an HTML script tag:
你通常会在全局库的文档中看到如何在 HTML 脚本标签中使用库的指导:

```html
<script src="http://a.great.cdn.for/someLib.js"></script>
```

Today, most popular globally-accessible libraries are actually written as UMD libraries (see below).
UMD library documentation is hard to distinguish from global library documentation.
Before writing a global declaration file, make sure the library isn't actually UMD.
如今,大多数流行的全局访问库实际上是以 UMD 库的形式编写的(请参见下文)。UMD 库文档很难与全局库文档区分开来。在编写全局声明文件之前,请确保库实际上不是 UMD。

## Identifying a Global Library from Code
## 从代码中识别全局库

Global library code is usually extremely simple.
A global "Hello, world" library might look like this:
全局库代码通常非常简单。一个全局的 "Hello, world" 库可能如下所示:

```js
function createGreeting(s) {
return "Hello, " + s;
return "你好," + s;
}
```

or like this:
或者像这样:

```js
window.createGreeting = function (s) {
return "Hello, " + s;
return "你好," + s;
};
```

When looking at the code of a global library, you'll usually see:
在查看全局库的代码时,你通常会看到:

- Top-level `var` statements or `function` declarations
- One or more assignments to `window.someName`
- Assumptions that DOM primitives like `document` or `window` exist
- 顶层的 `var` 语句或 `function` 声明
- 一个或多个对 `window.someName` 的赋值
- 假设 DOM 原语如 `document` `window` 存在

You _won't_ see:
你*不会*看到:

- Checks for, or usage of, module loaders like `require` or `define`
- CommonJS/Node.js-style imports of the form `var fs = require("fs");`
- Calls to `define(...)`
- Documentation describing how to `require` or import the library
- 检查或使用像 `require` `define` 这样的模块加载器
- CommonJS/Node.js 风格的导入形式,如 `var fs = require("fs");`
- 调用 `define(...)`
- 描述如何 `require` 或导入库的文档

## Examples of Global Libraries
## 全局库示例

Because it's usually easy to turn a global library into a UMD library, very few popular libraries are still written in the global style.
However, libraries that are small and require the DOM (or have _no_ dependencies) may still be global.

## Global Library Template

You can see an example DTS below:

```ts
// Type definitions for [~THE LIBRARY NAME~] [~OPTIONAL VERSION NUMBER~]
// Project: [~THE PROJECT NAME~]
// Definitions by: [~YOUR NAME~] <[~A URL FOR YOU~]>

/*~ If this library is callable (e.g. can be invoked as myLib(3)),
*~ include those call signatures here.
*~ Otherwise, delete this section.
*/
declare function myLib(a: string): string;
declare function myLib(a: number): number;

/*~ If you want the name of this library to be a valid type name,
*~ you can do so here.
*~
*~ For example, this allows us to write 'var x: myLib';
*~ Be sure this actually makes sense! If it doesn't, just
*~ delete this declaration and add types inside the namespace below.
*/
interface myLib {
name: string;
length: number;
extras?: string[];
}

/*~ If your library has properties exposed on a global variable,
*~ place them here.
*~ You should also place types (interfaces and type alias) here.
*/
declare namespace myLib {
//~ We can write 'myLib.timeout = 50;'
let timeout: number;

//~ We can access 'myLib.version', but not change it
const version: string;

//~ There's some class we can create via 'let c = new myLib.Cat(42)'
//~ Or reference e.g. 'function f(c: myLib.Cat) { ... }
class Cat {
constructor(n: number);

//~ We can read 'c.age' from a 'Cat' instance
readonly age: number;

//~ We can invoke 'c.purr()' from a 'Cat' instance
purr(): void;
}

//~ We can declare a variable as
//~ 'var s: myLib.CatSettings = { weight: 5, name: "Maru" };'
interface CatSettings {
weight: number;
name: string;
tailLength?: number;
}

//~ We can write 'const v: myLib.VetID = 42;'
//~ or 'const v: myLib.VetID = "bob";'
type VetID = string | number;

//~ We can invoke 'myLib.checkCat(c)' or 'myLib.checkCat(c, v);'
function checkCat(c: Cat, s?: VetID);
}
```
因为通常很容易将全局库转换为 UMD 库,所以很少有流行的库仍然以全局样式编写。但是,需要 DOM(或没有依赖性)的小型库可能仍然是全局的。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

后面的为什么都删了

Loading