如何使 D3 .data() 参数识别输入数据的打字稿类型？

Question

如何使 d3 data() 函数理解我的数据类型？

D3 data() 认为参数的d类型为unknown，但事实并非如此。

interface DataType {
  id: string;
  display: string;
}

const mydata: DataType[] = [{ id: "abc", display: "First Value" }];

d3.selectAll("rect").data(mydata, (d) => d.id); 
//(parameter) d: unknown

将鼠标悬停(d)在 VSCode 上我收到打字稿消息(parameter) d: unknown

将鼠标悬停 => d.id在 VSCode 上，我看到打字稿错误Object is of type unknown ts(2571)

在另一个密切相关的问题中，一些人建议确保结果 d.id 被强制作为字符串，但这对我来说仍然不起作用。但是，它确实改变了打字稿错误。

//force string
d3.selectAll("rect").data(mydata, (d: DataType) => `${d.id}`);

类型“(d: DataType) => string”的参数不可分配给类型“ValueFn<BaseType |”的参数 HTMLElement，未知，KeyType>'。参数“d”和“datum”的类型不兼容。类型“未知”不可分配给类型“DataType”.ts(2345)

我使用的是 typescript 4.8.2 我安装了整个 d3 npm istall d3，版本是 7.6.1

Answer 1

您可以注释选择的类型，这使得 Typescript 可以显示正确的类型。

interface DataType {
  id: string;
  display: string;
}

const mydata: DataType[] = [{ id: "abc", display: "First Value" }];

d3.selectAll<SVGRectElement, DataType>("rect")
  .data<DataType>(mydata, (d) => d.id); 

相关源代码在这里：https://github.com/DefinitelyTyped/DefinitelyTyped/blob/2b229cce80b334f673f1b26895007e9eca786366/types/d3-selection/index.d.ts#L720