In a part of my code I get a typescript error which I cannot solve. As a test I did a local assignment of a value to see how it can be fixed:

const t = ... // where t's type is: d3.Transition<SVGElement, ParseTreeHierarchyNode, SVGElement, IParseTreeRenderNode>
const tt: d3.Transition<Element, any, any, any> = t;

The problem is the first type parameter. SVGElement extends Element so they should be assignment compatible. Yet I get this error:

Type 'Transition<SVGElement, ParseTreeHierarchyNode, SVGElement, IParseTreeRenderNode>' is not assignable to type 'Transition<Element, any, any, any>'.
  The types returned by 'selection().datum(...).datum(...).on(...)' are incompatible between these types.
    Type 'ValueFn<SVGElement, any, void>' is not assignable to type 'ValueFn<Element, any, void>'.
      Type 'Element' is not assignable to type 'SVGElement'.ts(2322)

Note especially the last line. The error states I would try to assign Element to SVGElement, which is of course not possible. But that's not what I'm doing, actually. Somehow Typescript seems to invert the assignment and errors out on that.

What can I do to fix this problem?

CodePudding user response：

By accident I found out what caused the trouble: because the file with the D3.js code was meant to be used in a vscode webview and hence needs to be transpiled differently. Therefore I excluded it from the normal TS build of the extension.

Once I included it, the problems went away. No idea why, but that fixed it for me, even though that now creates a wrong output file (which is another problem).