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

Question

我在 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 在构建时出错。

error TS2304: Cannot find name 'Espago'

如何让 Espago 在组件内部可见？

也许还有其他方法可以link获取在线js资源？

Answer 1

你必须告诉 TypeScript 它是在别处定义的。

declare var Espago: any;

见

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

Using globally defined script inside the component

javascript

typescript

reactjs

webpack