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

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. import像往常一样使用 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 的官方打字到来之前，这是我发现的最好的方法。