I am currently working on a d3 project and to simplify the development process and reduce errors, I decided to implement TypeScript.
Using d3 v4, I initially faced issues with incorrect type definitions which led to errors like d3 not having a definition for scaleLinear().
After switching to what I believe is the correct definition file, I encountered invalid types for many variables:
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>;
Previously, I created these variables as follows:
this.SVGElement = d3.Select("body").append("svg");
this.SVGTitleArea = <d3.Selection<SVGGElement>>this.SVGElement.append("g");
In addition to variables, I have functions that render different components of the graph:
public RenderTitle() : d3.Selection<SVGGElement> {
this.SVGTitleArea = <d3.Selection<SVGGElement>>this.SVGElement.append("g");
// Do stuff here
return this.SVGTitleArea;
}
Since updating the typings file, it now expects the d3.Selection type to have 4 types:
interface Selection<GElement extends Element | EnterElement | Window, Datum, PElement extends Element | EnterElement | Window, PDatum>
To resolve variable definition errors, I adjusted them as shown below:
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>;
However, I'm unable to apply the same fix to the render functions:
public RenderTitle() : d3.Selection<SVGGElement, any, any, any>
I've attempted to determine the correct signature by inspecting the calls that create elements like <g>, but only see , any, any, any>.
What would be the best course of action in this situation? Is there an easy solution to address these types? Should I stick with using any? Should I consider reverting back to d3 v3 or abandoning TypeScript altogether?
Thank you.