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

【问题标题】：Error: Type 'number | undefined' is not assignable to type 'number | { valueOf(): number; }'?错误：键入“数字 | undefined' 不可分配给类型 'number | { valueOf(): 数字; }'？
【发布时间】：2019-05-03 04:03:16
【问题描述】：

我有这个数组类型：

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 的标记行上出现以下错误：

键入'数字 | undefined' 不可分配给类型 'number | { valueOf()：数字； }'。类型“未定义”不可分配给类型 '号码 | { valueOf(): 数字; }'。

我该如何进行这项工作？

【问题讨论】：

const {data} = this.state 在 createChart 中可能未定义。如果您确定数据永远不会未定义，解决方法是使用 d3.min(data as number, ....

标签： typescript d3.js

【解决方案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。但是，这与 .domain() 方法的 type definition 不匹配，该方法采用数字或可强制转换为数字的值的数组：

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

这解释了您收到错误的原因。显然，d3.max() 也是如此。

查看documentationd3.min()返回undefined的原因相当有限：

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

【讨论】：