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

Either your typings are obsolete or it isn't working as you would expect. Code itself may not fail, but function definition is different from simple number. Making function call could help `fontSize: (function goes here)()` — Sergey, Apr 04 '20 at 15:33
"*I believe property fontSize accepts delegate method*" - well, the typechecker does not believe that. Can you please post the type declaration of the `transform` method, or link the documentation of the library you are using? — Bergi, Apr 04 '20 at 15:34
@Bergi true enough, but I am still having an issue satisfying the linter here. I need syntax that works with the incoming objects having property `value` and return type `number` — Adam Cox, Apr 04 '20 at 15:50
@AdamCox This is not a linting problem. It's an error message from the type checker. — Bergi, Apr 04 '20 at 15:53
Well, your code does not fit the type declaration. So either your code is wrong, and you must pass a number not a function, or the type declaration for that library is wrong, and you should file a bug report. Without the implementation or documentation I cannot say which one it is. — Bergi, Apr 04 '20 at 15:54
If you're passing a method and the font size is correct, that means that the typings for the `transform` function is outdated. — Terry, Apr 04 '20 at 15:56
@Bergi you are right! About the typing being wrong. So I will answer with what is working now. I did go ahead and fix the typing, and all is well. Thanks!! — Adam Cox, Apr 04 '20 at 16:01

Adam Cox · Answer 1 · 2020-04-04T16:49:38.253

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

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

1 Answers1