TypeScript : Argument Type Function is not assignable to parameter type function

Question

I can't get my head around the following TypeScript error message in the Webstorm IDE (pretty new to TypeScript so sorry ...)

I am using d3.d.ts from the DefinitelyTyped repository to implement graphics with d3js in which the interface for d3.svg.arc() method is defined like:

export interface Arc { 
...
outerRadius: {
            (): (data: any, index?: number) => number;
            (radius: number): Arc;
            (radius: () => number): Arc;
            (radius: (data: any) => number): Arc;
            (radius: (data: any, index: number) => number): Arc;
        };
 ...
 }

when implementing the arc in the following manner ...

svg.selectAll(".arc")    
            .attr("d", function (d) {
                       return d3.svg.arc().outerRadius(
                              function (d) {
                                 return d - 9;
                              })
                        ...

I get the error: "Argument Type Function is not assignable to parameter type function"

So

 function (d) {return d - 9;})

doesn't seem to be valid for that interface even so it seems of the type

 (): (data: any, index?: number) => number;

I guess I oversee something obvious yet ... I stuck right now

Thanks

Solution

I had a similar issue with a string to number conversion and fixed it by adding an explicit typecasting like:

$.replace(/text/g, <string>$.now());.

Just note the <string> before the parameter.

Just try to typecast to and tell how it goes.

In your case it will be something like:

svg.selectAll(".arc")    
        .attr("d", function (d) {
                   return d3.svg.arc().outerRadius(
                          <Function>function (d) {
                             return d - 9;
                          })
                    ...

or maybe:

svg.selectAll(".arc")    
        .attr("d", function (d) {
                   return d3.svg.arc().outerRadius(
                          <function>function (d) {
                             return d - 9;
                          })
                    ...

since the error lies in the difference between Function and function.

Comments

[dorjeduck]

thanks a lot disney - when i add Function the script doesnt compile anymore, i get a "Type '() => number' requires a call signature, but type 'Function' lacks one."