D3 v4 TypeScript types

Question

I am building a small d3 project, and since it is quite complex, I wanted to use TypeScript to make some development simpler and less error prone.

I am using d3 v4. I think that I used the wrong type definition file before, but did not encounter any problems for a long time, until he finally complained that it d3did not contain a definition for scaleLinear().

Since then, I have moved on to what, in my opinion, is the correct definition file, which has a definition for d3.scaleLinear(), but now a significant number of my variables have invalid types.

Here are some examples:

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>;

I used them like this:

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

and etc.

I also have a number of functions that display different components of the chart:

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

  // Do stuff here

  return this.SVGTitleArea;
}

, , , d3.Selection 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?

.

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)