在REACT TypeScript中调用第三方函数

Question

I want to call WOW when a ReactJS Component has loaded

The WOW Javascript is referenced at the bottom of the HTML on the inital HTML load.

the Javascript way to initiate is

new WOW().init();

and I thought it would be good to call this on "componentDidMount()"

my component code is:

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;

How can I call a JS function that isn't imported?

Answer 1

You can declare the variable before using it:

declare var WOW: any;

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

Note that this will type WOW as any so you will lose type checking. If you need type checking you can declare WOW with a type instead of any :

interface WOW {
    init: () => void
}

interface WOWConstructor {
    new(): WOW
}

declare var WOW: WOWConstructor;

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