TypeScript中的回调参数类型推导

Question

type CallBack = (_: number) => number

function sqk({x}:{x:number}): Promise<number>;  
function sqk({x,callback}:{x:number,callback:CallBack}): void;
function sqk({x,callback}:{x:number,callback?:CallBack}): Promise<number>|void  {
  if(callback){
   callback (x * x);
  }
  return Promise.resolve(x)
}

// here our callback will receive a number, but the type of `x` can‘t  be deduced
const cb = sqk({x:5, callback:function(x) {
  console.log(x);
  return x;      
}});

// here our promise will receive a number, and the type of `x` is `number`
const promise = sqk({x:5}).then(x=>{console.log(x)})

What should I do to make TS automatically deduce the parameter type in the call？

A possible solution is to remove the callback from the object as the second parameter，as follows：

type CallBack = (_: number) => number

function sqk(x:number): Promise<number>;  
function sqk(x:number,callback:CallBack): void;
function sqk(x:number,callback?:CallBack): Promise<number>|void  {
  if(callback){
   callback (x * x);
  }
  return Promise.resolve(x*x)
}

const cb = sqk(5,(x)=> {
  console.log(x);
  return x;      
});


const promise = sqk(5).then(x=>{console.log(x)})

But this doesn't answer my question, why the first solution doesn't work？

Answer 1

First some observations, if you don't care for it, you can scroll down to the bottom for the answer:

Notice how it works without the overloads:

function workingUnary({ x , callback }: { x: number, callback: (x: number) => void }): number | void {
  return null!
}

workingUnary({x: 5, callback: (x) => {return null!}})
// ^x type ==> number

We can also gain some insight on how your overloaded function breaks if callback is undefined

sqk({x: 5, callback: undefined})
// The expected type comes from property 'callback' 
// which is declared here on type '{ x: number; callback: (x: number) => void; }'
// The call would have succeeded against this implementation, 
// but implementation signatures of overloads are not externally visible.

Noticeably this behavior is fixed if you change the order of the overloads:

function sqk2({ x , callback }: { x: number, callback: (x: number) => void }): void
function sqk2({ x }: { x: number }): number
function sqk2({ x , callback }: { x: number, callback?: (x: number) => void }): number | void {
  return null!
}

const test7 = sqk2({x: 5, callback: (x) => {return null!}})
// now it works fine?
const test8 = sqk2({x: 5})
// works fine if there is no callback
const test9 = sqk2({x: 5, callback: undefined})
// still broken

Answer

Your overloads are in the wrong order.

This is quoted from the (now deprecated) but still relevant TS docs on overloads ( link )

In order for the compiler to pick the correct type check, it follows a similar process to the underlying JavaScript. It looks at the overload list and, proceeding with the first overload, attempts to call the function with the provided parameters. If it finds a match, it picks this overload as the correct overload. For this reason, it's customary to order overloads from most specific to least specific.

Basically, you should reorder your overloads. And possibly add another overload to support if callback is undefined

function sqk2({ x , callback }: { x: number, callback: undefined }): number
function sqk2({ x , callback }: { x: number, callback: (x: number) => void }): void
function sqk2({ x }: { x: number }): number
function sqk2({ x , callback }: { x: number, callback?: (x: number) => void }): number | void {
  return null!
}

const test4 = sqk2({x: 5, callback: (x) => {return null!}})
// ^x type ==> number
const test5 = sqk2({x: 5})
// works fine if there is no callback
const test6 = sqk2({x: 5, callback: undefined})
// now works

View this on TS Playground