typescript - typescript 中的安全类型去抖功能

Question

我在 typescript 中有以下去抖功能:

export function debounce<T>(
  callback: (...args: any[]) => void,
  wait: number,
  context?: T,
  immediate?: boolean
) {
  let timeout: ReturnType<typeof setTimeout> | null;

  return (...args: any[]) => {
    const later = () => {
      timeout = null;

      if (!immediate) {
        callback.apply(context, args);
      }
    };
    const callNow = immediate && !timeout;

    if (typeof timeout === "number") {
      clearTimeout(timeout);
    }

    timeout = setTimeout(later, wait);

    if (callNow) {
      callback.apply(context, args);
    }
  };
}

我正在寻找更好的转换方式...参数:任何[]使用更安全的类型。

我怎样才能改变它？

更新

我提出了这个解决方案:

export function debounce<T = unknown, R = void>(
  callback: (...args: unknown[]) => R,
  wait: number,
  context?: T,
  immediate?: boolean
) {

你怎么看？

Answer 1

我做了一些改变。

首先，我们希望泛型类型是一个函数，以便稍后我们可以安全地使用 Paramters 实用程序类型获取参数。其次，我个人喜欢先等待时间，因为我经常将相同的去抖动时间应用到许多具有部分应用程序的听众，YMMV。第三，我们想要返回一个带有类型化的 this 参数的常规(非箭头)函数，这样调用方就不需要显式传递上下文。

function debounce<T extends (...args: any[]) => void>(
  wait: number,
  callback: T,
  immediate = false,
)  {
  let timeout: ReturnType<typeof setTimeout> | null;

  return function <U>(this: U, ...args: Parameters<typeof callback>) {
    const context = this;
    const later = () => {
      timeout = null;

      if (!immediate) {
        callback.apply(context, args);
      }
    };
    const callNow = immediate && !timeout;

    if (typeof timeout === "number") {
      clearTimeout(timeout);
    }

    timeout = setTimeout(later, wait);

    if (callNow) {
      callback.apply(context, args);
    }
  };
}

对于普通函数和方法的用法，我们可以使用:

const handler: (evt: Event) => void = debounce(500, (evt: Event) => console.log(evt.target));
class Foo {
    constructor () {
        // can also type-safely decorate methods
        this.bar = debounce(500, this.bar.bind(this));
    }

    bar (evt: Event): void {
        console.log(evt.target);
    }
}

甚至在对象字面量的方法上:

interface Bar {
    a: number,
    f: () => void
}

const bar: Bar = {
    a: 1,
    f: debounce<(this: Bar) => void>(100, function() { console.log(this.a); }),
}

Playground