javascript - 'string | null' 类型的参数不可分配给 'ValueFn' 类型的参数

Question

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

我尽可能地将 d3 部分与 react 代码分开。有一个 react 组件呈现 div与 id在 componentDidUpdate id传递给 draw使用我所有的 d3 代码(下面的代码)在一个单独的文件中运行。
我试图为所有可以输入的东西提供一个类型。

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 error in ... :
Argument of type 'string | null' is not assignable to parameter of type 'ValueFn<SVGPathElement, Datum[], string | number | boolean | null>'.
      Type 'null' is not assignable to type 'ValueFn<SVGPathElement, Datum[], string | number | boolean | null>'. 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来自以及如何解决该错误？

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

Answer 1

这个问题是 TypeScript 等价的各种类型的 JavaScript 问题，这些问题时不时出现，开发人员混淆了通过引用传递函数与在原地调用所述函数，从而仅传递其返回值。

您实际上是通过执行 lineGenerator(data) 来调用(即执行)行生成器.从 API docs 可以看出和 type definitions这将返回一个字符串或 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() 的内部工作执行。正在传递绑定(bind)到选择的数据。反过来，这将返回 d 的路径定义字符串。路径的属性。