从反应打字稿组件调用外部Javascript函数答案

【问题标题】：Call external Javascript function from react typescript components从反应打字稿组件调用外部Javascript函数
【发布时间】：2018-11-30 12:49:00
【问题描述】：

我有一个带有 typescript 的 react redux 应用程序。所以场景是这样的，我有一个 index.cshtml 文件，其中包含一些 javascript。

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

现在在我的 react 组件上，在 main.tsx 的 componentWillMount() 函数中我想调用测试函数。

componentWillMount() {
    window.test();
}

但这对我不起作用。消息是测试在类型窗口上不存在

非常感谢任何帮助。

【问题讨论】：

【解决方案1】：

您可以像这样扩展Window 接口：

interface Window {
    test(): void;
}

当您在模块中执行此操作时，您需要确保它是您正在扩展的全局Window 接口：

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

这为编译器提供了类型实现。

【讨论】：

【解决方案2】：

我建议在这里使用一些 Utility 类。据我了解，您需要一些可以在其他组件中使用的功能。因此，最好的方法是使用静态方法创建 Util 类。或者像这样的一些模块：

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

};

【讨论】：

【解决方案3】：

如果你确定你有一个全局变量。您可以在输入文件夹中输入您的自定义文件。

interface Window {
    test: () => void
}

如果你使用 eslint，你还应该将 test 设置为 globals 配置选项。

【讨论】：