從React TypeScript組件調用外部Javascript函數

Question

我有一個帶有打字稿的react redux應用程序。 所以場景是這樣的，我有一個包含一些javascript的index.cshtml文件。

<script type="text/javascript">
    function test() {
        alert('Function from index.html');
    }
</script>

現在在我的react組件上，在componentWillMount（）函數中的Main.tsx上，我想調用測試函數。

componentWillMount() {
    window.test();
}

但這對我不起作用。 消息是測試在類型窗口上不存在

任何幫助是極大的贊賞。

Answer 1

您可以像這樣擴展Window接口：

interface Window {
    test(): void;
}

在模塊中執行此操作時，需要確保它是要擴展的全局Window接口：

declare global {
    interface Window {
        test(): void;
    }
}

這為編譯器提供了類型實現。

Answer 2

我建議在這里使用一些Utility類。 據我了解，您需要一些可以在其他組件中使用的功能。 因此，最好的方法是使用靜態方法創建Util類。 或類似這樣的模塊：

export default {
  test() {
    console.log('foo'); 
  }, ...

};

Answer 3

如果您確定您具有全局變量。 您可以在鍵入文件夾中鍵入自定義文件。

interface Window {
    test: () => void
}

如果使用eslint，還應該將test設置為globals config選項。