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

Question

I have this array type:

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

I am using D3 to create an x axis like this:

 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]);
  };

On the marked lines using d3.min and d3.max I get the following error:

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

How do I make this work?

Answer 1

For your call to d3.min() the compiler will use the following 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;

As you can see the function can return either U—in your case the type of Details.Year, i.e. number— or undefined. This, however, does not match the type definition for the .domain() method which takes an array of either numbers or values coercible to numbers:

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

This explains why you get the error. The same, obviously, holds true for d3.max().

Looking at the documentation the reasons for d3.min() to return undefined are rather limited:

If the iterable contains no comparable values, returns undefined.

Given your code you are guaranteed to not run into this issue. For that reason you can safely cast the return values of d3.min() and d3.max() to 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]);