d3 v4 TypeScript 类型

Question

我正在制作一个小型的d3项目，由于其相当复杂，因此我希望使用TypeScript使开发变得更简单，减少错误。

我正在使用d3 v4。我认为之前我使用了错误的类型定义文件，但是很长一段时间内我没有遇到任何问题，直到出现“d3不包含scaleLinear()”的定义的投诉。

我已经切换到我认为是正确的定义文件，其中确实有d3.scaleLinear()的定义，但是现在我的许多变量具有无效类型。

以下是一些例子：

public SVGElement    : d3.Selection<SVGElement>;
public SVGTitleArea  : d3.Selection<SVGGElement>;
public SVGLegendArea : d3.Selection<SVGGElement>;
public SVGXAxisArea  : d3.Selection<SVGGElement>;
public SVGYAxisArea  : d3.Selection<SVGGElement>;
public SVGChartArea  : d3.Selection<SVGGElement>;

我以前是这样创建它们的：

this.SVGElement = d3.Select("body").append("svg");
this.SVGTitleArea = <d3.Selection<SVGGElement>>this.SVGElement.append("g");

我有许多函数可以呈现图表的不同组件：

等等。

此外，我还有许多函数可以呈现图表的不同组件：

public RenderTitle() : d3.Selection<SVGGElement> {
  this.SVGTitleArea = <d3.Selection<SVGGElement>>this.SVGElement.append("g");

  // Do stuff here

  return this.SVGTitleArea;
}

自从转移到可能正确的类型文件后，它现在抱怨类型期望4种类型：

interface Selection<GElement extends Element | EnterElement | Window, Datum, PElement extends Element | EnterElement | Window, PDatum>

现在，我知道这并不理想，我更喜欢更强的类型控制，但至少我已经成功修复了与变量定义相关的错误：

public SVGElement    : d3.Selection<SVGElement, any, any, any>;
public SVGTitleArea  : d3.Selection<SVGGElement, any, any, any>;
public SVGLegendArea : d3.Selection<SVGGElement, any, any, any>;
public SVGXAxisArea  : d3.Selection<SVGGElement, any, any, any>;
public SVGYAxisArea  : d3.Selection<SVGGElement, any, any, any>;
public SVGChartArea  : d3.Selection<SVGGElement, any, any, any>;

但是渲染函数我不能做相同的事情：

public RenderTitle() : d3.Selection<SVGGElement, any, any, any>

我尝试悬停在创建例如<g>元素的调用上，以确定签名应该是什么，但它实际上给出了, any any any>。

我的最佳选择是什么？有没有简单的方法来修复这些类型？我应该将它们全部保留为any吗？我应该降级到d3 v3吗？还是应该继续使用v4并放弃TypeScript？

谢谢。

- Ozzah

Answer 1

我并没有看到您的问题出在哪里。可能有以下几种情况：

let mySelection : d3.Selection<SVGElement, {}, HTMLElement, any> = d3.selectAll<SVGElement, {}>('#line');
function foo() : d3.Selection<SVGElement, {}, HTMLElement, any> {
  return mySelection.append<SVGElement>('g')
}
alert(foo().node().tagName)

- Wolfgang Kuehn

---

谢谢。 (1) 我的 Selection 变量定义模板签名错误，(2) 我没有意识到可以为函数调用分配特定类型，例如 gObj = mySelection.append<SVGGElement>("g")；我一直在尝试强制转换整个赋值语句：gObj = <d3.Selection<SVGGElement, /*something*/, /*something*/, /*something*/>>mySelection.append("g")。谢谢您的建议，看起来很有效。 - Ozzah