Typescript Debounce

debounce.ts

// ts 3.6x
function debounce<T extends Function>(cb: T, wait = 20) {
    let h = 0;
    let callable = (...args: any) => {
        clearTimeout(h);
        h = setTimeout(() => cb(...args), wait);
    };
    return <T>(<any>callable);
}

// usage
let f = debounce((a: string, b: number, c?: number) => console.log(a.length + b + c || 0));
f("hi", 1, 1);
f("world", 1);

The correct type for timeout is ReturnType<typeof setTimeout> not number

The return value is a positive integer which identifies the timer created by the call to setTimeout(). In the browser correct call is window?.setTimeout().

https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#return_value

Still no solution that solves my context issue

 function debounce<F extends (...args: Parameters<F>) => ReturnType<F>>(
  func: F,
  waitFor: number,
): (...args: Parameters<F>) => void {
  let timeout: ReturnType<typeof setTimeout>;
  
  return (...args: Parameters<F>): void => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), waitFor);
  };
}

const person = {
  name: 'Jack',
  speak: function say(sec:number){
  debounce(()=>console.log(`My name is ${this.name} , debounced ${sec}`),sec)();
  }

}

person.speak(3_000);
debounce(()=>console.log('hehe'),100)();
debounce(()=>console.log('hehe 1_000'),1_000)();
person.speak(4_000);

not sure if this solution addresses the issue but works

playground

You create a new function every time, therefore person.speak is not debounced