title: Angular 2 typescript invoke javascript function
body: <p>Is there a correct way to invoke a JavaScript function from a component in Angular 2 (TypeScript) ?</p>
  
  <p>Here is my component :</p>
  
  <pre><code>import { ElementRef, AfterViewInit }       from '@angular/core';
  
  export class AppComponent implements AfterViewInit {
  
      constructor(private _elementRef: ElementRef) {
      }
  
      ngAfterViewInit() {
          /**
           * Works but i have this error :
           * src/app.component.ts(68,9): error TS2304: Cannot find name 'MYTHEME'.
           * src/app.component.ts(69,9): error TS2304: Cannot find name 'MYTHEME'.
           */
          MYTHEME.documentOnLoad.init(); 
          MYTHEME.documentOnReady.init();
  
          /**
           * Works without error, but doesn't seem like a right way to do it
           */
          var s = document.createElement("script");
          s.text = "MYTHEME.documentOnLoad.init(); MYTHEME.documentOnReady.init();";
          this._elementRef.nativeElement.appendChild(s);
      }
  }
  </code></pre>
  
  <p>Calling the JavaScript function directly result in an compilation error, but the syntax in the "compiled" JavaScript file (app.component.js) is correct :</p>
  
  <pre><code>AppComponent.prototype.ngAfterViewInit = function () {
      MYTHEME.documentOnLoad.init();
      MYTHEME.documentOnReady.init();
  };
  </code></pre>
  
  <p>The 2nd way (appendChild) works without error, but i don't think (altering the DOM from typescript/angular) is the correct way to do it.</p>
  
  <p>I found this : <a href="https://stackoverflow.com/questions/21544893/using-a-javascript-function-from-typescript">Using a Javascript Function from Typescript</a> I tried declaring the interface :</p>
  
  <pre><code>interface MYTHEME {
      documentOnLoad: Function;
      documentOnReady: Function;
  }
  </code></pre>
  
  <p>But the TypeScript doesn't seem to recognize it (no error in the interface declaration).</p>
  
  <p>Thanks</p>
  
  <p>Edit :</p>
  
  <p>Following the answer by Juan Mendes this is what i ended with :</p>
  
  <pre><code>import { AfterViewInit }       from '@angular/core';
  
  interface MYTHEME {
      documentOnLoad: INIT;
      documentOnReady: INIT;
  }
  interface INIT {
      init: Function;
  }
  declare var MYTHEME: MYTHEME;
  
  export class AppComponent implements AfterViewInit {
  
      constructor() {
      }
  
      ngAfterViewInit() {
          MYTHEME.documentOnLoad.init(); 
          MYTHEME.documentOnReady.init();
      }
  }
  </code></pre>