在组件内使用全局定义的脚本答案

【问题标题】：Using globally defined script inside the component在组件内使用全局定义的脚本
【发布时间】：2016-03-15 09:06:46
【问题描述】：

我在index.html中使用全局脚本声明

<!DOCTYPE html>
<html>
    <head>
    <script src='https://js.espago.com/espago-1.1.js' type='text/javascript'></script>
    ...
    </head>
<body>
    ...
</body>

现在我想在组件内部使用它。

import * as React from "react";
import * as $ from "jquery";

//how to import Espago?

export default class EspagoPayment extends React.Component<any, any> {
    componentDidMount() {
        $("#espago_form").submit(function(event){
             var espago = new Espago({public_key: 'xxx', custom: true, live: false, api_version: '3'});
             espago.create_token({
                    ...
             });
        });
    }

    render() {
        return (
                ...
        );
    }
}

Webpack 在构建时出错。

错误 TS2304：找不到名称“Espago”

如何让Espago在组件内可见？

也许还有其他方法可以链接到在线 js 资源？

【问题讨论】：

@YoannM nope error TS2339: Property 'Espago' does not exist on type 'Window'.
好的...我将删除我的评论以避免任何混淆。

标签： javascript reactjs typescript webpack

【解决方案1】：

你必须告诉 TypeScript 它是在其他地方定义的。

declare var Espago: any;

见https://stackoverflow.com/a/13252853/227299

【讨论】：

完美！感谢您的参考。