javascript - typescript 中的 'd3 和 'd3-hexbin' 作为全局库

Question

因此，我使用 d3 和 d3-hexbin 作为全局库:

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-hexbin.v0.2.min.js"></script>

... 并在 .ts 中将它们引用为:

/// <reference types="d3" />
/// <reference types="d3-hexbin" />

... 使用 DefinitelyTyped定义。然而，尽管这有效:

const svg = d3.select('#hitmap').append('svg')

...这个:

const hexbin = d3.hexbin().radius(binsize + 1)

...失败并显示:

Property 'hexbin' does not exist on type 
  'typeof "/Users/bytter/node_modules/@types/d3/index"'

想法？

Answer 1

即使您有 d3 的类型，您也没有 d3-hexbin 的派生类型。所以你必须回到 declare 方法，就像我在这里为 d3-cloud 所做的那样:Typings for d3-cloud

基本上，您必须遵循的步骤如下:

1. 像往常一样导入 d3 库，但给它一个别名:import * as D3 from 'd3';(注意:D3 为大写 D)

2. declare d3 再次用于 hexbin:declare let d3: any;

3. 将 D3 用于与父 d3 库有关的所有内容，将 d3 单独用于 hexbin 生成。

const svg = D3.select('#hitmap').append('svg');

const hexbin = d3.hexbin().radius(binsize + 1);

这将阻止编辑器显示特定于 hexbin 的建议，并且 Typescript 将无法捕获特定于 hexbin 的类型错误。但不幸的是，在 hexbin 的官方打字到达之前，这是我找到的最好的方法。