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

これまでおそらく、正しいタイピングファイルに移動するので、それは今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)