在REACT TypeScript中调用第三方函数

Question

我想在ReactJS组件加载后调用WOW

在初始HTML加载的HTML底部引用了WOW Javascript。

JavaScript的初始化方式是

new WOW().init();

我认为最好在“ componentDidMount（）”上调用它

我的组件代码是：

import * as React from 'react'; 

class Banner extends React.Component {
    componentDidMount() {
         new WOW().init();  //This does not work "[ts] Cannot find name "WOW"
    } 
    shouldComponentUpdate() {
        return false;
    }
    render() {
        return (
            <div className="banner-section">
                <div className="an-home-img-container banner-1">
                    <div className="overlay"></div>
                    <div className="home-banner-content text-center">
                        <div className="container">
                            <h1 className="wow fadeInDown animate hidden">
                                Some <span>Text</span> Here
                        </h1>
                            <button className="an-btn an-btn-default btn-big wow fadeIn hidden">Expole Us</button>
                        </div>
                    </div>
                </div>
            </div >
        )
    } }

export default Banner;

如何调用未导入的JS函数？

Answer 1

您可以在使用变量之前声明它：

declare var WOW: any;

class Banner extends React.Component {
    componentDidMount() {
         new WOW().init();
    } 
    // ...
}

请注意，这将输入WOW作为any WOW ，因此您将丢失类型检查。 如果需要类型检查，则可以使用类型而不是any类型声明WOW ：

interface WOW {
    init: () => void
}

interface WOWConstructor {
    new(): WOW
}

declare var WOW: WOWConstructor;

class Banner extends React.Component {
    componentDidMount() {
         new WOW().init();
    } 
    // ...
}