如何在TypeScript中为d3 SVG的zoom缩放功能正确做类型适配

错误原因 #

该类型报错核心是d3.zoom()默认生成的ZoomBehavior泛型参数和已声明的svg选择器类型不匹配：

• 未显式指定泛型时，d3.zoom()默认返回的类型是ZoomBehavior<Element, unknown>
• 你的svg选择器类型是d3.Selection<SVGSVGElement, unknown, null, undefined>，要求传入的zoom行为匹配宿主元素为SVGSVGElement的类型约束

解决方案 #

给d3.zoom()显式传入对应的泛型参数即可，不需要使用// @ts-ignore忽略报错。

修复后完整代码 #

if (svg) {
    // 显式指定zoom行为的泛型参数：第一个为宿主元素类型，第二个为元素绑定的数据类型
    const zoomBehavior = d3
      .zoom<SVGSVGElement, unknown>()
      .scaleExtent([0.5, 5])
      .translateExtent([
        [0, 0],
        [containerWidth, containerHeight],
      ])
      .on("zoom", (event) => {
        const zoomState = event.transform;
        console.log("zoomState", zoomState);
      });
    svg.call(zoomBehavior);
}

补充说明 #

如果需要对zoom事件回调做更严格的类型校验，也可以给event参数显式指定类型：

.on("zoom", (event: d3.D3ZoomEvent<SVGSVGElement, unknown>) => {
  // event.transform等属性会获得完整的类型提示
  const zoomState = event.transform;
})

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