D3 事件：版本 6+ 中的类型定义

Question

我有一组使用 d3（版本 5）开发的小部件，现在我必须将它们迁移到版本 7。在迁移指南https://observablehq.com/@d3/d3v6-migration-guide中，我已经了解了事件的新语法：

\n

// before\nelement.on(\'click\', (d, i, e) => ...\n\n\n// now\nelement.on(\'click\', (event, d) => ...\n

\n

一旦我切换到新语法，程序就再次开始运行。耶！

\n

现在的问题是我在这个项目中使用了 typescript！虽然我已经安装了最新的@types/...

\n

  "dependencies": {\n      "d3": "^7.1.1",\n         ...\n\n  "devDependencies": {\n      "@types/d3": "^7.1.0",\n         ...\n

\n

...当涉及到事件时，我一直在类型定义和智能感知方面遇到麻烦。

\n

// 1. before (Worked fine)\nelement.on(\'click\', (d: MyData, i: number, e: whatever[]) => ...\n\n\n// 2. introducing types == Error back! \xe2\x9d\x8c  \nelement.on(\'click\', (event: PointerEvent, d: MyData) => ...\n\n\n// 3. then, my (ugly) workaround:\nelement.on(\'click\', (event: any , d: any) => ...\n

\n

有趣的是，虽然我安装了 @types/d3 v7.0.1，但 Typings 系统看起来仍然保留对旧 v5 格式的引用。不知何故，智能感知仍然认为我的第一个参数是数据，第二个参数是数字索引：

\n

\n

\n

...但在现实生活中我得到的是 { event: PointerEvent, d: MyData }，如下图所示。

\n

\n

因此，简而言之，感觉 D3 的类型声明存在问题，因为 Intellisense 认为事件仍然采用 v5 格式，而在现实生活中却并非如此。

\n

有谁知道如何解决这个打字问题？\n必须将“any”分配给我的事件中的整个事情，这真的很烦人。

\n

Answer 1

D3Event我通过向我的代码库添加一个接受 2 个类型参数的实用程序类型来解决这个问题：

export type D3Event<T extends Event, E extends Element> = T & { currentTarget: E }

然后我可以这样使用它：

selection.on('mouseover', (event: D3Event<MouseEvent, SVGGElement>, d: SomeType) => { ... }

它有点冗长，但比any