Utilizing Lodash debounce in VueJs watch feature while incorporating Typescript

Question

Utilizing Lodash debounce in VueJs watch feature while incorporating Typescript

When working with VueJS in Javascript, I can achieve the following:

import debounce from "lodash/debounce";

...

watch: {
  variable: debounce(function() {
    console.log('wow');
  }, 500)
}

However, when attempting to do the same in VueJS using Typescript, I encountered some issues:

npm i lodash-es
npm i @types/lodash-es -D

Within the component:

import { Component, Vue, Watch } from "vue-property-decorator";
import debounce from "lodash-es/debounce";

...

@Watch("variable")
debounce(function() {
  console.log('wow');
}, 500)

Unfortunately, errors occurred:

The 'debounce' function lacks a return type annotation and implicitly returns 'any'.
The number '500' is implicitly assigned with the type 'any'.

P.S. The following method worked without any issues:

func = debounce(() => {
    console.log('wow');
}, 500)

typescript vue.js lodash watch

Answer 1

Answer №1

@Watch("variable")
debounce(function() {
  console.log('wow');
}, 500)

The given code does not have the correct syntax. A decorator should be applied to a class member with a specified name.

Using Lodash's debounce function with the Watch decorator is not straightforward, as the latter is intended for use with prototype methods.

One way to achieve this is by creating a custom decorator and chaining them, but this might lead to unwanted behavior due to the shared debounce interval across all component instances:

function Debounce(delay: number) {
  return (target: any, prop: string) => {
    return {
        configurable: true,
        enumerable: false,
        value: debounce(target[prop], delay)
    };
  }
}

...
@Watch('variable')
@Debounce(500)
onVariable() { ... }
...

A better approach would be to debounce an instance method, following the suggestions in the Vue.js documentation:

...
created() {
  this.onDebouncedVariable = debounce(this.onDebouncedVariable, 1000);
}

@Watch('count')
onVariable() {
    this.onDebouncedVariable();
}

onDebouncedVariable() { ... }
...

Answer 2

@Watch("variable")
debounce(function() {
  console.log('wow');
}, 500)

The given code does not have the correct syntax. A decorator should be applied to a class member with a specified name.

Using Lodash's debounce function with the Watch decorator is not straightforward, as the latter is intended for use with prototype methods.

One way to achieve this is by creating a custom decorator and chaining them, but this might lead to unwanted behavior due to the shared debounce interval across all component instances:

function Debounce(delay: number) {
  return (target: any, prop: string) => {
    return {
        configurable: true,
        enumerable: false,
        value: debounce(target[prop], delay)
    };
  }
}

...
@Watch('variable')
@Debounce(500)
onVariable() { ... }
...

A better approach would be to debounce an instance method, following the suggestions in the Vue.js documentation:

...
created() {
  this.onDebouncedVariable = debounce(this.onDebouncedVariable, 1000);
}

@Watch('count')
onVariable() {
    this.onDebouncedVariable();
}

onDebouncedVariable() { ... }
...

Answer 3

Answer №2

If you're looking for a solution, check out this link: https://www.npmjs.com/package/vue-debounce-decorator

Follow these steps once you have it:

  @Watch('value')
  @Debounce(300)
  private onValueChanged (val: string): void {
    // implement your code here
  }

Answer 4

If you're looking for a solution, check out this link: https://www.npmjs.com/package/vue-debounce-decorator

Follow these steps once you have it:

  @Watch('value')
  @Debounce(300)
  private onValueChanged (val: string): void {
    // implement your code here
  }

Utilizing Lodash debounce in VueJs watch feature while incorporating Typescript

Answer №1

Answer №2

Similar questions

I am currently having issues with the mustache syntax in vuejs, as it is not functioning properly

When executing prisma generate, an error of TypeError is thrown stating that the collection is

Issue with submitting VueJS form on mobile devices, works fine on web browsers but not on

Is it possible to efficiently structure intricate JSON data onto interfaces in TypeScript with the incorporation of observables?

Having trouble with adding a listener or making @click work in VueJS?

What is the best way to transpile TypeScript within the Astro framework?

React's Redux persist is causing a duplication of requests being sent

Navigating the world of getElementById and addEventListener outside of the DOM

Utilizing a string variable as a property name for dynamic typing

When compiling in Visual Studio 2019, the process terminated with exit code -1073741819

The pathway specified is untraceable by the gulp system

The value of 'Boolean' cannot be changed as it is a constant or a read-only property and cannot be assigned

quickest method for retrieving a property by name, regardless of its location within the object hierarchy

Lodash will return a false value when checking an empty object

Vue.js components are not being utilized within Laravel's blade files

Receiving undefined values when passing down props from an asynchronous API call

Tips for updating the input name in Vue.js

The Laravel and Vue.js axios delete function operates smoothly without displaying any errors, yet it fails to delete

Error in AngularJS and TypeScript: Property 'module' is undefined and cannot be read

Tips for validating dates in Angular 4