calling javascript function from typescript angular 2

Question

I am using VS 2015 as my IDE. I have read the following: Angular 2 typescript invoke javascript function

and

Using a Javascript Function from Typescript

and

Using a Javascript Function from Typescript

however, i still don't get the basic.

assuming that i have testing.js and app.component.ts

    var testJs = function () {
    this.asd = 123;

}

testJs.prototype.testing = function (param) {
    console.log(param);
}

How do I use testJs in my app.component.ts? at the moment i try this but failed:

import { Component } from '@angular/core';
interface testJs {
    testing: Function;
}
declare var testJs: testJs;
@Component({
    selector: 'my-app',
    templateUrl: '/mainTemplate.html'
})
export class AppComponent {
    testJs.testing("adsf");
}

I have tried the following and it still does not work as well.

and I don't have angular.cli. is it possible to do it without angular.cli?

Have you seen the Angular testing guide here: https://angular.io/docs/ts/latest/testing/ — DeborahK, Apr 20 '17 at 21:23
i am not looking for unit test. i am looking on how to call a javascript funciton from typescript — jay, Apr 20 '17 at 22:11
are u using angular-cli? u need to put this script to angular-cli.json file? — Julia Passynkova, Apr 21 '17 at 13:31
no, I don't use angular-cli. is there any solution without having to use angular cli? — jay, Apr 21 '17 at 21:39

score 4 · Answer 1 · answered Apr 22 '17 at 23:41

4

Finally found a way to do it.

in your html file that download the main.js file, put reference to the javascript file in the head tag
in your typescript file (in this case i am using angular) do the following:

a. declare the variable :

b. use the funciton in the constructor of the exported class

import { Component } from '@angular/core';
declare function testJs(): any;
@Component({
    selector: 'my-app',
    templateUrl: '/mainTemplate.html'
})

export class AppComponent {
    user: string;
    constructor() {
        testJs.prototype.testFunction();
        this.user = "asdf";
        var x = 90;
    }
}

answered Apr 22 '17 at 23:41

jay

1,055
3
15
35

After refresh i always get the undefined error. Do you know any fix? – Jesse de gans Apr 27 '17 at 22:34
declare function testJs(): any; in the above context, the testJs is not the filename. it is the function name. have you got that correct? – jay Apr 28 '17 at 00:54
What is the "testFunction()" then? – a.s.t.r.o Jun 04 '17 at 15:09
just some random function. you can change it with whatever name – jay Jun 09 '17 at 00:36

score 3 · Answer 2 · edited Apr 21 '17 at 05:04

3

where is get this testJS.js. Is this external lib? if yes, you need to include it in angular-cli like that:

"scripts": [ "../node_modules/.../testJS.js" ],
You need to either create typings or at least make dummy type:

declare var testJS: any;
You can use it afer

edited Apr 21 '17 at 05:04

eko

39,722
10
72
98

answered Apr 20 '17 at 23:50

Julia Passynkova

17,256
6
33
32

i don't think it's working... I just put a screenshot in my question above – jay Apr 21 '17 at 09:42
1

create typings for a js file? how, please! – agodinhost May 09 '19 at 22:04

score 1 · Answer 3 · answered Jul 16 '18 at 11:43

1

i'm use from eval()
1) before main.js file, put javascript file.
2) use from eval("testFunction()") in your typescript file in angular.

answered Jul 16 '18 at 11:43

Mehran Kh

11
4

calling javascript function from typescript angular 2

3 Answers3

Linked