Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use Lodash debounce in VueJs watch with Typescript

In VueJS (Javascript) I can do this:

import debounce from "lodash/debounce";

...

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

In VueJS (Typescript) I try:

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

In component:

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

...

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

But I get errors:

  • 'debounce', which lacks return-type annotation, implicitly has an 'any' return type.
  • Member '500' implicitly has an 'any' type.

P.S. This works fine:

func = debounce(() => {
    console.log('wow');
}, 500)
like image 405
Vadim Rulev Avatar asked Sep 04 '19 13:09

Vadim Rulev


1 Answers

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

isn't a correct syntax. A decorator is supposed to be applied to class member but no name was specified.

There's no straightforward way to use Lodash debounce with Watch decorator because the latter is supposed to be used with prototype method.

It's possible to make it a decorator and chain them but this will likely result in undesirable behaviour because debounce interval will be shared through prototype method between 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() { ... }
...

This likely should be achieved by debouncing instance method, similarly to how the documentation suggests:

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

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

onDebouncedVariable() { ... }
...
like image 107
Estus Flask Avatar answered Sep 22 '22 13:09

Estus Flask