{"id":12228,"library":"typescript-debounce-decorator","title":"TypeScript Debounce Decorator","description":"typescript-debounce-decorator provides a lightweight and dependency-free TypeScript decorator for debouncing class methods. It enables developers to control the execution frequency of functions, preventing rapid, successive calls. The current stable version is 0.0.18, and while release cadence isn't explicitly stated, the version number suggests a mature, low-churn utility. Key differentiators include its minimal footprint (1KB after compression) and zero external dependencies, making it an ideal choice for projects prioritizing bundle size and avoiding dependency bloat. It supports both leading and trailing edge debouncing and offers a `cancel` function to abort pending debounced calls. A notable characteristic is that the return values of decorated methods are inherently discarded.","status":"active","version":"0.0.18","language":"javascript","source_language":"en","source_url":"https://github.com/duxiaofeng-github/typescript-debounce-decorator","tags":["javascript","typescript","debounce","decorator","typescript-debounce-decorator"],"install":[{"cmd":"npm install typescript-debounce-decorator","lang":"bash","label":"npm"},{"cmd":"yarn add typescript-debounce-decorator","lang":"bash","label":"yarn"},{"cmd":"pnpm add typescript-debounce-decorator","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The `debounce` decorator is a named export, not a default export. Ensure you destructure it correctly.","wrong":"import debounce from 'typescript-debounce-decorator';","symbol":"debounce","correct":"import { debounce } from 'typescript-debounce-decorator';"},{"note":"The `cancel` function is also a named export for clearing pending debounced calls. CommonJS `require` syntax is not directly supported.","wrong":"const cancel = require('typescript-debounce-decorator').cancel;","symbol":"cancel","correct":"import { cancel } from 'typescript-debounce-decorator';"},{"note":"When using the decorator without any arguments (e.g., just `@debounce`), the parentheses are still required, i.e., `@debounce()` or `@debounce` followed by an argument like `@debounce(1000)`.","wrong":"class MyClass { @debounce myMethod() {} } // Missing parenthesis, if no options are passed","symbol":"@debounce","correct":"class MyClass { @debounce(1000) myMethod() {} }"}],"quickstart":{"code":"import { debounce, cancel } from \"typescript-debounce-decorator\";\n\nclass MyService {\n  private count: number = 0;\n\n  constructor() {\n    // Simulate user interaction\n    setInterval(() => {\n      console.log(`Calling increment by interval... current count: ${this.count}`);\n      this.increment();\n    }, 200);\n\n    // Schedule a cancellation after some time\n    setTimeout(() => {\n      console.log(\"Attempting to cancel pending increments...\");\n      this.clearPending();\n    }, 1500);\n  }\n\n  @debounce(1000, { leading: true }) // Debounce for 1 second, fire on leading edge\n  increment() {\n    this.count++;\n    console.log(`Incremented! New count: ${this.count}`);\n  }\n\n  clearPending() {\n    cancel(this.increment);\n    console.log(\"Cancellation command issued.\");\n  }\n}\n\nnew MyService();","lang":"typescript","description":"This quickstart demonstrates how to apply the `@debounce` decorator to a class method, configure it for leading-edge execution, and use the `cancel` function to prevent pending debounced calls from firing."},"warnings":[{"fix":"If your application relies on leading-edge debouncing behavior, you must explicitly set `{ leading: true }` in the decorator options: `@debounce(1000, { leading: true })`.","message":"The `leading` option for the `@debounce` decorator changed its default value from `true` to `false` in version 0.0.18.","severity":"breaking","affected_versions":">=0.0.18"},{"fix":"Design your decorated methods to perform side effects rather than returning values, or refactor your logic to avoid debouncing methods whose return values are critical for subsequent operations.","message":"Methods decorated with `@debounce` will have their return values 'eaten' (discarded). The decorator intercepts the method call and does not propagate the return value.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Ensure that `\"experimentalDecorators\": true` and `\"emitDecoratorMetadata\": true` are set under `\"compilerOptions\"` in your `tsconfig.json`.","message":"TypeScript decorators require specific compiler options to be enabled. Without them, you will encounter compilation errors.","severity":"gotcha","affected_versions":"All versions (TypeScript usage)"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add `\"experimentalDecorators\": true` to the `compilerOptions` section of your `tsconfig.json`.","cause":"The TypeScript compiler option `experimentalDecorators` is not enabled.","error":"Decorators are not enabled. To enable them, set the 'experimentalDecorators' option to 'true' in your 'tsconfig.json' file."},{"fix":"Ensure you have `import { debounce } from 'typescript-debounce-decorator';` at the top of your TypeScript file.","cause":"The `debounce` symbol has not been imported or the import path is incorrect.","error":"Cannot find name 'debounce'."},{"fix":"Install `reflect-metadata` (`npm install reflect-metadata`) and add `import 'reflect-metadata';` once at the entry point of your application (e.g., `main.ts` or `index.ts`).","cause":"The TypeScript compiler option `emitDecoratorMetadata` is enabled, but the `reflect-metadata` polyfill is not loaded at runtime.","error":"ReferenceError: Reflect is not defined OR Error: Reflect.metadata is not a function"}],"ecosystem":"npm"}