Debounce, Throttle에 type 적용하기

• throttle을 만들던 도중, 이전에 만들었던 debounce를 포함하여 type을 잘못 지정해주었다는 것을 알게되었다.
• 흔히들 <Type extends any[]>를 사용해서 해결한 것들이 많았지만 generic을 더 깊게 공부해보면 해결할 수 있는 문제라고 생각되었다.

문제 분석

• return 해주는 callback()에서의 …args: unknown[]와 throttle에서 인자로 받는 callback의 …args: unknown[]이 충돌하여 발생한 에러였다.
• 즉, 아래의 함수에서는 throttle에서 …args로 받을 때 e: WheelEvent라고 받았는데, return 해주는 함수에서 다시 unknown으로 타입을 지정해주려 했기 때문에 unknown이라는 타입은 WheelEvent라는 타입에 포함될 수 없다는 에러였다.

const throttle = (callback: (...args: unknown[]) => unknown, delay: number) => {
  let timer: NodeJS.Timeout;
  let isWaiting = true;
  return (...args: unknown[]) => {
    if (isWaiting) {
      callback(...args);
      isWaiting = false;
      setTimeout(() => {
        isWaiting = true;
      }, waitingTime);
    }
  };
};

export default throttle;

문제 해결

const throttle = <TArgs extends unknown[]>(
  callback: (...args: TArgs) => unknown,
  waitingTime: number,
) => {
  let isWaiting = true;
  return (...args: TArgs) => {
    if (isWaiting) {
      callback(...args);
      isWaiting = false;
      setTimeout(() => {
        isWaiting = true;
      }, waitingTime);
    }
  };
};

export default throttle;

• 제네릭을 사용하여 들어오는 callback 함수의 …args의 unknown 타입과 반환하는 callback 함수의 …args의 unknown 타입이 같은 것임을 명시해주어 해결할 수 있었다.
• 타입스크립트의 제네릭의 용도에 대해서 더 깊게 공부할 수 있었다.

/ 참고자료

Documentation - Generics

Documentation - Do's and Don'ts

TypeScript Generic Rest Parameters and Tuple Types in Practice