字符串 |null' 不可分配给类型为 'ValueFn<SVGPathElement， Datum[]， string | number | boolean | null>' 的参

Question

我是d3的新手，并尝试使用d3，TypeScript和react实现最小的折线图。但它总是会导致打字稿错误。我什至在被错误消息替换之前看到我的图表一瞬间。

我尽可能地将 d3 部分与反应代码分开。有一个 react 组件可以使用id渲染div，componentDidUpdateid会与我的所有 d3 代码一起传递给一个单独文件中的draw函数(下面的代码)。 我试图为所有可以键入的内容提供一个类型。

import * as d3 from 'd3'
type Props = { id: string }
type Datum = {x: number, y: number}
type Data = Array<Datum>
const draw = (props: Props) => {
const data = [
{ x: 1, y: 5 },
{ x: 20, y: 20 },
{ x: 40, y: 10 },
{ x: 60, y: 40 },
{ x: 80, y: 5 },
{ x: 100, y: 60 },
]
const container = d3.select<HTMLElement, any>('#' + props.id)
container.selectAll<HTMLElement, any>('*').remove()
const svg = container.append<SVGElement>('svg')
const lineGenerator = d3.line<Datum>()
.x((d: Datum) => d.x)
.y((d: Datum) => d.y)
svg.append<SVGPathElement>('path')
.datum<Data>(data)
.attr('fill', 'none')
.attr('stroke', 'steelblue')
.attr('stroke-width', 1.5)
.attr('d', lineGenerator(data))
}
export default draw

就像我说的，图表是可见的，但很快就会消失，相反，我得到：

...
TypeScript 错误 ... ：
类型为"string | null"的参数不可分配给参数 类型 'ValueFn<SVGPathElement，>'.
      类型"null"不可分配给类型 'ValueFn<SVGPathElement，>'。 TS2345

26 |         .attr('stroke', 'steelblue')
27 |         .attr('stroke-width', 1.5)
> 28 |         .attr('d', lineGenerator(data))
|                    ^
29 | }
30 | 
31 | export default draw

任何想法argument of type string | null来自哪里以及如何解决该错误？

编辑：由于事实证明它与问题无关，为了清楚起见，我删除了反应代码。

Answer 1

这个问题相当于各种类型的JavaScript问题的TypeScript，这些问题不时弹出，开发人员将通过引用传递函数与原位调用所述函数混淆，从而仅传递其返回值。

您实际上是通过执行lineGenerator(data)来调用，即执行线路生成器。从 API 文档和类型定义中可以看出，这将返回字符串或 null：

export interface Line<Datum> {
(data: Datum[]): string | null;
//...
}

但是，这与 .attr() 方法的签名不匹配，在这种情况下，该方法期望将函数作为第二个参数传递。

export interface Selection<GElement extends BaseType, Datum, PElement extends BaseType, PDatum> {
//...
attr(name: string, value: ValueFn<GElement, Datum, string | number | boolean | null>): this;
//...
}

解决方案是将生成器传递给.attr()而不执行它：

.attr('d', lineGenerator)

然后，生成器将由传递绑定到选择的数据.attr()的内部工作原理执行。反过来，这将返回路径的d属性的路径定义字符串。