错误:键入'number \未定‘不能指定为'number not { 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标记的行上，我得到以下错误：

类型'number \未定‘不能分配给键入'number { valueOf()：number；}’。类型'undefined‘不能分配到键入'number { valueOf()：number；}’。

我该怎么做呢？

Answer 1

对于对d3.min()的调用，编译器将使用以下类型定义

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

如您所见，函数可以返回U、-in(您的情况下)-- Details.Year类型，即number--或者undefined。但是，这与.domain()方法的.domain()方法不匹配，该方法接受一个数组，该数组的数字或值可强制于数字：

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

这就解释了为什么你会犯这个错误。显然，d3.max()也是如此。

从文档来看，d3.min()返回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]);