Type '(d: { value: number }) => number' is not assignable to type 'number'

Question

While the code works, the type-checker complains about how this delegate method is assigned to property...

Property fontSize expects type of number. However, it is a transform, and somehow there is an font object with a property value that needs to be transformed into a type number.

The method signature extracts (destruct of object?) property value from the array of font objects. Example of value would be 97.

input: fontObj => { ..., value }

const onload = () => {
  const dv = new DataSet.View().source(data);
  const range = dv.range('value');
  const [min, max] = range;
  dv.transform({
    type: 'tag-cloud',
    fields: ['name', 'value'],
    imageMask: this.imageMask,
    font: () => {return 'Verdana'},
    size: [w, h], // The width and height settings are best based on imageMask Make adjustments
    padding: 0,
    timeInterval: 5000, // max execute time
    rotate: 0,
    /* rotate() {
      return 0;
    }, */
    fontSize: (d: { value: number }) => {     // <---- issue here!
      console.log(d);
      const size = ((d.value - min) / (max - min)) ** 2;
      return size * (17.5 - 5) + 5;
    },
  });

The type-checker reports error:

Type '(d: { value: number }) => number' is not assignable to type 'number'

Of course, just assigning a number value resolves the linting issue, but the objective here is to transform the incoming font size values into a suitable scale. How to do that and satisfy the type-checker?

Thanks!

The typing:

Location: node_modules > @antv > data-set > lib > transform > tag-cloud.d.ts

    export interface Options {
        fields?: [string, string];
        font?(): string;
        fontSize?: number;
        rotate?: number;
        padding?: number;
        size?: [number, number];
        spiral?: 'archimedean' | 'archimedean' | 'rectangular';
        timeInterval?: number;
        imageMask?: HTMLImageElement;
    }

Answer 1

Thanks to @bergi, for pointing out there is a bug in the typing!

The typing was:

export interface Options {
    fields?: [string, string];
    font?(): string;
    fontSize?: number;          //  <---- the trouble!
    rotate?: number;
    padding?: number;
    size?: [number, number];
    spiral?: 'archimedean' | 'archimedean' | 'rectangular';
    timeInterval?: number;
    imageMask?: HTMLImageElement;
}

Now I make it:

export interface Options {
    fields?: [string, string];
    font?(): string;
    fontSize?({}): number;          //  <---- the fix!
    rotate?: number;
    padding?: number;
    size?: [number, number];
    spiral?: 'archimedean' | 'archimedean' | 'rectangular';
    timeInterval?: number;
    imageMask?: HTMLImageElement;
}

And change property assignment, from:

    fontSize(d: { value: number }) {
      const size = ((d.value - min) / (max - min)) ** 2;
      return size * (17.5 - 5) + 5;
    },

To:

    fontSize: (d: { value: number }) => {
      const size = ((d.value - min) / (max - min)) ** 2;
      return size * (17.5 - 5) + 5;
    },

Looks like I will need to look if there is an outstanding bug fix, or file request...

tag-cloud.ts