1

命名空间一章给出了一个我不明白的与D3.d.ts相关的示例。
这是完整的例子:

declare namespace D3 {
    export interface Selectors {
        select: {
            (selector: string): Selection;
            (element: EventTarget): Selection;
        };
    }

    export interface Event {
        x: number;
        y: number;
    }

    export interface Base extends Selectors {
        event: Event;
    }
}

declare var d3: D3.Base;

我真正不明白的是如何在我的模块或我的打字稿脚本中使用D3.d.ts ?请给我一些简短的例子。

编辑
请忽略这里使用 D3 的事实;可以是 B3 或 G3 或 X7 ... 随便什么;我对专门的图书馆不感兴趣。我只对如何使用我的打字稿模块和打字稿脚本中给出的示例感兴趣。

EDIT2 最让我困惑的是,上面的例子使用了declare namespace ...而不是namespace D3(例如用于namespace Validation)。另外声明 var d3: D3.Base;的用途是什么(以及如何使用?)?

4

2 回答 2

6

此类声明定义了并非来自导入但可能window由 some定义的全局变量<script>。为了能够直接使用这些变量(无需导入!),您始终可以使用引用,例如:

/// <reference path="../types/D3.d.ts" />
d3.select("div"); // No import!

如果声明文件被放置在一个@types目录中,它应该被包含在没有显式引用的情况下。


使用命名空间declare是因为这是一个声明文件:它必须导出命名空间(仅对模块有效)或声明它,以使这些类型可用。

于 2018-03-21T20:56:12.010 回答
0

据我了解打字稿示例中的“代码”不会生成或更改任何输出javascript。所有的声明都会帮助智能感知和打字稿编译器发现错误,但不会改变代码。该示例给出的声明旨在用于“环境”声明文件,即为普通 javascript 库提供 typescript 定义的声明文件,以便 typescript 和 intellisense 可以使用它们,就好像它们是 typescript 文件而不是普通的 javascript 一样。我相信首先近似打字稿将它发现的没有声明知识的任何东西都视为“任何”类型。

对于提到的库,您最好使用现有的类型库 ( npm install --save-dev @types/d3)。我发现在安装库 ( npm install --save d3) 和@types/d3.tsimport * as d3 from 'd3'文件后(在角度 5 中;其他情况可能是其他步骤)将带入对象和类型信息,并且一切正常。如果您打开类型文件,您将看到一组与 typescript 文档示例中给出的完全不同的声明,但我相信它们仍然是所有声明,即没有代码。

回复编辑

示例中的文件不是主要的打字稿文件。它是一个描述普通 javascript 库的“typescript shape”的声明文件,即 typescript 编译器和智能感知应该如何假装普通 javascript 看起来像用 typescript 编写的。虽然您可能认为 D3 名称的选择是任意的,但事实并非如此。该.d.ts文件试图为本身不提供该信息的库(d3 库:https ://www.npmjs.com/package/d3 )提供打字稿元信息(尽管如前所述,打字稿元信息)特定的库可作为 @types 包使用)。

如果您正在编写自己的库代码并希望根据验证示例在命名空间内工作,您将使用namespace D3而不是declare namespace D3,但您也将编写.ts文件,而不是.d.ts文件。正如文档的部分标题所说,该示例正在处理环境名称空间,即文件编写者(通常)不提供的普通javascript代码的名称空间。

总之,文档的两半的目标是不同的。在前半部分,“验证”代码向您展示了如何在您自己的打字稿代码中使用命名空间。在后半部分,“d3”代码向您展示了如何为纯 javascript 而非 typescript 的代码提供 typescript 元数据。

于 2018-03-22T16:02:57.713 回答