如何在不使用@ts-ignore的情况下修复D3.js中'this'隐式具有'any'类型的TypeScript错误

这个错误是因为TypeScript没办法自动推断出D3 .each() 回调里this的类型——在D3的这个方法里，this指向的是当前选中的DOM元素（也就是我们创建的<g class="node">标签），所以只要给this加上显式的类型注解就能解决，完全不用@ts-ignore。

下面给你两种实用的修复方式：

方法1：给this添加明确的类型注解 #

你可以直接在回调函数的参数列表最前面，给this指定SVGGElement类型（因为我们操作的是SVG分组元素）：

svg.selectAll(".node")
  .each(function(this: SVGGElement, d: any) {
    d3.select(this)
      .attr("data-source", d.id)
  })

如果你的nodes数据有定义好的类型（比如一个NodeData接口），建议把d: any也换成对应类型，让代码更严谨：

// 先定义节点数据的类型
interface NodeData {
  id: string;
  // 这里可以加其他节点属性，比如name、x、y等
}

svg.selectAll(".node")
  .each(function(this: SVGGElement, d: NodeData) {
    d3.select(this)
      .attr("data-source", d.id)
  })

方法2：用箭头函数避开this绑定 #

箭头函数不会绑定自己的this，我们可以利用D3 .each()回调的第三个参数（所有选中元素的数组）来获取当前元素，这样就完全绕开了this的类型问题：

svg.selectAll(".node")
  .each((d: any, index, nodeElements) => {
    d3.select(nodeElements[index])
      .attr("data-source", d.id)
  })

同样，把d: any替换成你的节点数据类型会更好。

小提示 #

第一种方法更贴近D3的传统写法，第二种则更符合TypeScript里箭头函数的使用习惯，你可以根据自己的代码风格来选。

内容的提问来源于stack exchange，提问作者Kirill