Call external Javascript function from react typescript components

Question

I have a react redux application with typescript. So the scenario is like this, I have an index.cshtml file that includes some javascript.

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

Now on my react component, on Main.tsx in componentWillMount() function I want to call test function.

componentWillMount() {
    window.test();
}

but this is not working for me. The message is test doesn't exist on type window

Any help is greatly appreciated.

Answer 1

You can extend the Window interface like this:

interface Window {
    test(): void;
}

When you are doing this within a module, you need to ensure it is the global Window interface you are extending:

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

This provides the type implementation to the compiler.