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.

Fenton · Accepted Answer · 2018-11-30 12:51:27Z

6

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.

answered Nov 30, 2018 at 12:51

Fenton

253k74 gold badges404 silver badges414 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vahe Akhsakhalyan · Accepted Answer · 2018-11-30 12:55:00Z

0

I suggest to use here some Utility class. As I understand you need some functions which you can use in other components. So, the best way to do it is to create Util class with statics methods. or some module like this:

export default {
  test() {
    console.log('foo'); 
  }, ...

};

answered Nov 30, 2018 at 12:55

Vahe Akhsakhalyan

2,2264 gold badges26 silver badges41 bronze badges

Comments

izayl · Accepted Answer · 2018-11-30 12:57:07Z

0

If you are sure that you have a global variable. You can type your self define file in typing folder.

interface Window {
    test: () => void
}

if you use eslint, you should also set test to globals config option.

answered Nov 30, 2018 at 12:57

izayl

5386 silver badges9 bronze badges

Collectives™ on Stack Overflow

Call external Javascript function from react typescript components

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related