How do you refer to custom javascript functions in your type script methods?

Question

Say, you have a simple Javascript function such as sayHello():

function sayHello(){
   alert('Hello');
}

and you put this in your app's assets/js folder as a custom library assets/js/my-js-library.js

Then, finally, you refer to it from the index.html like this:

<script src='http://example.com/assets/js/my-js-library.js'></script>

What does it take in typescript ( say in ngOnInit for example ) so you can do something like this?

ngOnInit () {
   sayHello();
}

Or is it not possible?

Yes your code should just work, did you try it? If a javascript function is in the global scope you can call it from anywhere. — Kokodoko, Nov 01 '17 at 08:27

i3lai3la · Accepted Answer · 2017-11-01T07:46:54.993

0

Yeah you can.

external.js

var myExtObject = (function() {

  return {
    func1: function() {
      alert('function 1 called');
    },
    func2: function() {
      alert('function 2 called');
    }
  }

    })(myExtObject||{})

function justAFunction(){
   alert('test');
}

var webGlObject = (function() { 
  return { 
    init: function() { 
      alert('webGlObject initialized');
    } 
  } 
})(webGlObject||{})

app.ts

import 'external.js'

declare var myExtObject: any;
declare var webGlObject: any;

export class App {
  name:string;
  constructor() {
    this.name = 'Angular2'
    webGlObject.init();
    justAFunction();
  }

  CallFunction1() {
    myExtObject.func1();
  }

  CallFunction2() {
    myExtObject.func2();
  }
}

check out this URL : https://plnkr.co/edit/b2kAztHntMuNjTfOv8jD?p=preview

edited Nov 01 '17 at 07:46

answered Nov 01 '17 at 07:38

i3lai3la

980
6
10

Thanks. if it is this much work, would you say that it is better to convert your js library functions into typeScript and by pass this method completely? Cause honestly, I wasnot expecting such a multiple step operation for a sayHello func which is bare js func anyway? – Average Joe Nov 01 '17 at 07:42
i updated the code, you can just directly call your js function after import the external.js into your typescipt – i3lai3la Nov 01 '17 at 07:48
first of all, thank you very much for your spending time on this - __this much__. Really appreciate it. To further simplify the code and exactly anser my question, I will create an answer. Would you please check and modify it if I make any mistakes. – Average Joe Nov 01 '17 at 09:49

score 0 · Answer 2 · answered Nov 01 '17 at 09:53

external.js

function justAFunction(){
   alert('test');
}

app.ts

import 'external.js'

export class App {
  constructor() {
    justAFunction();
  }
}

would this work? I assumed that the declaring of webGlObject has no bearing on the justAFunction. The reason I cut the code on the func1 and func2 cause I did not have business with the objects. I just wanted to see the bare bone necessity to make a simple external HelloWorld js function to be utilized within TypeScript.

If we just focused on the justAFunction, would this code be the min necessity? I guess my mistake was to use the <Script src=''> as opposed to the import, then. Yes, No?

How do you refer to custom javascript functions in your type script methods?

2 Answers2