技術間

IT技術(主にwebとインフラ)についてメモを残していきたいと思っています

TypescriptでD3.jsを使用した際に起こるthisの競合

これはtypescript 2.3.3、D3.js 4.9.1の記事です

Typescriptは他のオブジェクト指向言語のようにクラスを使用できます。 Javascriptのオブジェクトをクラスのように使用するのに比べ、非常に分かり易く記述できるのですが、既存のライブラリと干渉することがあります。 やろうとしていることは正しいのだけれども、Typescriptの型チェックに引っかかる、といった具合ですね。 以下引っかかった例です。

class D3Class {
  setDragEvent() {
    d3.select('#circle').call(d3.drag().on("start", this.dragstart));
  }

  private dragstart() {
    // ↓ここで型エラーが起きる 
    d3.select(this).classed("active", true);
  }
}

わかりやすくするため、startイベントのみ記述しています。

この際にコメントの位置でエラーが起きました。 ここでのthisは、本来ならばeventが発生した要素が入るはずですが、Typescriptはクラスを示すthisだと思っているようです。

改善策として、anyでキャストするとエラーを消すことができます。

d3.select(<any>this).classed("active", true);

TypescriptとD3.jsをあわせて使っていると、D3.js単体で使っている状態では使える構文でエラーが起きてしまうことがたまにあります。 @type/d3モジュールのアップデートで改善されるようなものなのでしょうか。 今後修正がくるとありがたいですね。