tickFormat function is not working with Typescript

[lritter79]

Consider the following yScale:

  const yScale = useMemo(
    () =>
      scaleLinear<number>({
        domain: [0, Math.max(...totalValues)],
        range: [yMax, 0],
      }),
    [yMax, totalValues]
  );

Here's my tick formatter function:

  const tickFormatter: TickFormatter<number> = (value: number) => {
    return `${value}%`;
  };

This is the axis I'd like to pass it to:

        <AxisLeft numTicks={3} scale={yScale} tickFormat={tickFormatter} />

I'm getting the following TS error:

Type 'TickFormatter<number>' is not assignable to type 'TickFormatter<NumberValue>'.
  Type 'NumberValue' is not assignable to type 'number'.
    Type '{ valueOf(): number; }' is not assignable to type 'number'.ts(2322)
types.d.ts(67, 5): The expected type comes from property 'tickFormat' which is declared here on type 'IntrinsicAttributes & CommonProps<ScaleLinear<number, number, never>> & { axisClassName?: string | undefined; left?: number | undefined; ... 4 more ...; children?: ((renderProps: AxisRendererProps<...>) => ReactNode) | undefined; }'

I can't import NumberValue as a type from anywhere. What do I do?

[williaster]

interesting, I don't usually encounter this - perhaps because the tickFormatters are defined inline (making types inferred).

quick workaround is to write { valueOf(): number } instead of number (this is just a broader type(