错误：键入“数字 | undefined' 不能分配给类型 'number | { valueOf(): 数字；}'？

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.minandd3.max我收到以下错误：

输入'号码| undefined' 不能分配给类型 'number | { valueOf(): 数字；}'。类型 'undefined' 不能分配给类型 'number | { valueOf(): 数字；}'。

我如何使这项工作？

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: Array<number | { valueOf(): number }>): this;

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

查看文档d3.min()，返回的原因undefined相当有限：

如果可迭代对象不包含可比较的值，则返回 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]);