Tomasz Tomasz - 2 months ago 45
React JSX Question

reactJs + typescript + debounce - cannot import debounce properly

I have problem with importing

debounce
library properli into
react + typescript
project.

I have done:


  1. npm install debounce --save

  2. typings install dt~debounce --save --global

  3. in my file, import debounce as:
    import debounce from 'debounce';

  4. use debounce like:
    debounce(function(){ console.log('testtt'); })();



With these code my code compillation is passing, but when I'm trying to run webside i get error:

Uncaught TypeError: debounce_1.default is not a function


What am i doing wrong?

Thanks

Answer

I figured out that lodash library has the debounce function and a typings for typescript.

It works like this:

import _ = require('lodash');

...

class SearchControl extends React.Component<ISearchControlProps, ISearchControlState> {
    private debouncedLoadSuggestions;
    constructor(props: any) {
        ...
        this.debouncedLoadSuggestions = _.debounce(this.fetchSuggestions, 500);
    }

    fetchSuggestions = (value: string) => {
        ...
    };

    onSuggestionsFetchRequested = ({value}) => {
        this.debouncedLoadSuggestions(value);
    };
}
Comments