typescript - 错误 : Type 'number | undefined' is not assignable to type 'number | { valueOf(): number; }' ?

Question

我有这个数组类型:

interface Details {
  Name: string;
  URL: string;
  Year: number;
}
interface AppState {
  data: Details[];
}

我正在使用 D3 创建一个这样的 x 轴:

 createChart = () => {
    const { data } = this.state;
    const width = 900,
      height = 600;

    // x-axis
    const x = d3
      .scaleLinear()
      .domain([
        d3.min(data, ({ Year }) => (Year ? Year - 1 : 0)), // ERROR
        d3.max(data, ({ Year }) => (Year ? Year + 1 : 0)) // ERROR
      ])
      .range([0, width]);
  };

在标记线上使用 d3.min和 d3.max我收到以下错误:

Type 'number | undefined' is not assignable to type 'number | { valueOf(): number; }'. Type 'undefined' is not assignable to type 'number | { valueOf(): number; }'.

我如何使这项工作？

Answer 1

为您调用 d3.min()编译器将使用以下 type definition :

export function min<T, U extends Numeric>(array: Iterable<T>, accessor: (datum: T, index: number, array: Iterable<T>) => U | undefined | null): U | undefined;

如您所见，该函数可以返回 U - 在你的情况下 Details.Year 的类型，即 number — 或 undefined .然而，这与 type definition 不匹配。为 .domain()该方法采用数字或可强制转换为数字的值的数组:

domain(domain: Array<number | { valueOf(): number }>): this;

这解释了您收到错误的原因。显然，这同样适用于 d3.max() .

看着 documentation d3.min()的原因返回 undefined比较有限:

If the iterable contains no comparable values, returns undefined.

鉴于您的代码，您可以保证不会遇到此问题。因此，您可以安全地转换 d3.min() 的返回值。和 d3.max()至 number :

const x = d3
  .scaleLinear()
  .domain([
    d3.min(data, ({ Year }) => (Year ? Year - 1 : 0)) as number,  // cast to number
    d3.max(data, ({ Year }) => (Year ? Year + 1 : 0)) as number   // cast to number
  ])
  .range([0, width]);