QwikDev / QwikDev/qwik

[🐞] `useDebouncer$` from docs has broken types

Open
#7,553 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug PR welcomed types
Dominant language
TypeScript
Stars
22.1k
Forks
1.4k
Avg merge
1d 10h
Merged PRs (30d)
52

Description

Describe the bug

in qwik's docs there is a page that generously shares code for a useDebouncer$ hook that works fine, but has broken type definitions, causing it to break the application in the moment of build

here is the debouncer code:

export const useDebouncerQrl = <A extends readonly unknown[], R>(
  fn: QRL<(...args: A) => R>,
  delay: number,
): QRL<(...args: A) => void> => {
  const timeoutId = useSignal<number>();
 
  return $((...args: A): void => {
    window.clearTimeout(timeoutId.value);
    timeoutId.value = window.setTimeout((): void => {
      void fn(...args);
    }, delay);
  });
};
 
export const useDebouncer$ = implicit$FirstArg(useDebouncerQrl);

it throws the following error in the void fn(...args); line:

Argument of type '[...A]' is not assignable to parameter of type 'QrlArgs<(...args: A) => R>'.

as I'm not a typescript lord I'd really like somebody else's help to solve this issue

Reproduction

https://qwik.dev/examples/introduction/hello-world/#f=7VZNS8NAEL37K0YoZIVl6UWRxQZ68dRLcxUPhTQS1A0krSDS%2F%2B6bnf0iVuhVMKd8zdvZmX3vTXFo7u%2FOHhrNHgtK94fFYz9Oh%2FWIviVD1oQffBe3zeaS8yX1YJ4FlR%2B3MLsV0oXGgIQtK96uHdzbJx3dK3zNPT1ramouVecsr%2FOgjDGs65bWvqJNrfHVC5INvqOvbs7%2F%2BzH0bR3bINlkk10Vo4bg1AqFotwx0KEAtB4uohGMgKlsSvFTCd1AMo57hsM1e4uVQ2w2WRBvjk%2Fy3LmYREA7adm9f2QuorX0e8kXWO5HV9WsKUC5SBQEPvn4ZniRMubVlHrfTxMk24YxMMVKdBzSqhjSUgyodLyVrWm6XS45szmFeDpNRPATamJCGtC%2BctLxKtNWlTBt12FoSl%2Buq1BjX%2BdTuM0889hIMhNN5uNAtZAXt%2BRfIv%2BkRH4D

Steps to reproduce

see link

System Info
@patrickkmatias /shaliah (feat-persist-state-serverside) > npx envinfo --system --npmPackages '{vite,undici,typescript,@builder.io/*}' --binaries --browsers
Need to install the following packages:
envinfo@7.14.0
Ok to proceed? (y) y


  System:
    OS: Linux 6.11 Ubuntu 24.04.2 LTS 24.04.2 LTS (Noble Numbat)
    CPU: (12) x64 AMD Ryzen 5 5500U with Radeon Graphics
    Memory: 1.13 GB / 7.11 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 22.14.0 - /usr/local/bin/node
    npm: 11.2.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 135.0.7049.114
  npmPackages:
    typescript: 5.4.5 => 5.4.5 
    undici: * => 7.8.0
Additional Information

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the useDebouncer$ snippet on the linked Qwik cookbook page and reproduce the TypeScript build error in the linked example. Check the reported void fn(...args) type failure; it is done when the documented snippet builds successfully with the debouncer behavior intact.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
documentation
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.