title: React Typescript, Call a function from external script
body: <p>In my react application, I fetch a custom javascript file from the server and append it as a <code>script</code> tag to the body of <code>document</code>.</p>
  
  <p>this newly added custom file contains a method called <code>manipulator</code>. Now in one of the components, I want to call that function. As I know the function should exist in the <code>window</code> global object. </p>
  
  <pre><code>if(documnet.getElementById('customJsId')){ // check if the script tag exists in document
   window.manipulator(); // which I get Property 'iframeManipulator' does not exist on type 'Window'.ts(2339)
  }
  </code></pre>
  
  <p>But here I get the compiler error</p>
  
  <blockquote>
    <p>Property 'manipulator' does not exist on type 'Window'.ts(2339)</p>
  </blockquote>
  
  <p>which is totally logical, but I did not find a way to create an extended interface for <code>window</code> or any other way to tell the compiler that there is an optional function in <code>window</code> called <code>manipulator</code>.</p>
  
  <p>Any help is appreciated.</p>
  
  <pre><code>  ----------Just in case--how the script is added to document--------------
    loadProjectCustomJS() {
      runInAction(async () =&gt; {
        thisfetchProjectJs().then((doc) =&gt; {
          const body: HTMLBodyElement = document.getElementsByTagName('body')[0];
          const customjs: HTMLScriptElement = document.createElement('script');
          customjs.type = 'text/javascript';
          customjs.id = 'customJsId'
          customjs.src = doc.get('resourceUrl');
          body.appendChild(customjs);
        });
      });
    }
  </code></pre>