Question

Namespaces章给出了一个与 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 令我感到困惑的是，以上示例使用声明命名空间... 而不是命名空间D3 （例如用于名称空间验证）。 声明var d3：D3.Base; 的用途（以及如何使用？）是什么？

Answer 1

此类声明定义的全局变量不是来自导入，而是可能由某些window在<script>上定义。为了能够直接简单地使用这些变量（没有导入！），你总是可以使用一个引用，例如：

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

如果声明文件放在@types目录中，则应该包含它而不显式引用。

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

Answer 2

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

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

回复编辑

示例中的文件不是主要的打字稿文件。它是一个声明文件，用于描述普通javascript库的“typescript形状”，即typescript编译器和intellisense应该假装普通的javascript如果是用typescript编写的。虽然您可能认为D3的名称选择是任意的，但并不完全如此。 .d.ts文件正在尝试为库（d3库：https://www.npmjs.com/package/d3）提供typescript元信息，该库本身不提供该信息（尽管如上所述，该特定库的typescript元信息是作为@types包提供）。

如果您正在编写自己的库代码并希望按照验证示例在命名空间内工作，那么您将使用namespace D3而不是declare namespace D3，但您也会编写{{1}文件，而不是.ts文件。正如文档的节标题所述，该示例正在处理 ambient 名称空间，即普通javascript代码的名称空间，文件的编写者不会（通常）提供。

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

环境命名空间打字稿示例

2 个答案:

回复编辑