typescript - 如何使 D3 .data() 参数识别输入数据的 typescript 类型？

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

将鼠标悬停在 VSCode 中的 (d) 上，我收到 typescript 消息 (parameter) d:unknown

将鼠标悬停在 VSCode 中的 => d.id 上，我看到 typescript 错误 Object is of typeunknown ts(2571)

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

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

“(d: DataType) => string”类型的参数不可分配给“ValueFn'。 参数“d”和“datum”的类型不兼容。 类型“unknown”不可分配给类型“DataType”。ts(2345)

我正在使用 typescript 4.8.2 我用npm istall d3安装了整个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