reactJs + typescript + debounce - 無法正常導入debounce

Question

我有導入debounce庫合適到react + typescript項目的問題。

我做：

1. npm install debounce --save
2. typings install dt~debounce --save --global
3. 在我的文件，導入防抖動爲：import debounce from 'debounce';
4. 使用反跳這樣的：debounce(function(){ console.log('testtt'); })();

有了這些代碼我的代碼compllation傳遞，但當我試圖運行我們bside我得到錯誤：

Uncaught TypeError: debounce_1.default is not a function

我到底做錯了什麼？

感謝

Answer 1

我想通了，lodash庫具有debounce功能和打字稿一分型。

它的工作原理是這樣的：

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); 
    }; 
} 

Answer 2

我只是碰到了這個問題爲好。看起來debounce的類型只是錯誤的，也許是對於過時的非模塊版本的庫。我並不傾向於在所有的lodash帶來只是這個功能，所以在未來的人，這些分型爲我工作：

declare module "debounce" { 
    function debounce<F extends Function>(func: F, wait?: number, immediate?: boolean): F; 
    namespace debounce {} 
    export = debounce; 
} 

例子：

import * as debounce from "debounce"; 

document.body.addEventListener("mousemove", debounce((e: MouseEvent) => console.log("moved"), 500));