Importing a JavaScript function in TypeScript and AngularJS 2

Question

I have a plugin that works with JavaScript. I want to use the function inside of my TypeScript component in AngularJS2. I have used different kinds of ways with no success.

@angular/cli: 1.0.0-rc.0, node: 7.7.2, @angular/core: 2.4.9

Let's assume I want to use the following function cube.js:

function cube(x) {
   return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export default { cube, foo };

Using Type Definition approach, I create cube.d.ts as follows:

interface Cube {
   cube(x:number):number;
} 
export default Cube;

In my component, I have imported the function as follows:

import Cube from './cube';
...
public myCube:Cube;
console.log(myCube.cube(3));

But it gives me the following error:

Error in :0:0 caused by: Cannot read property 'cube' of undefined TypeError: Cannot read property 'cube' of undefined at HComponent.webpackJsonp

in tsconfig.json, allowJS is true (edited: "allowJs": true). @type module has already been installed. Still Can not read a simple JS function.

Any idea?

Try instancing it constructor(private myCube: Cube) {} in the constructor — SrAxi
– SrAxi, Commented Mar 20, 2017 at 15:02

Enayat · Accepted Answer · 2017-03-20 20:49:27Z

3

I found the answer.

My cube.js file:

"use strict"; 
class Cube {
    cube(x) {
     return x * x * x;
   }
}
export default Cube;

My cube.d.ts file

export default class Cube {
  cube(x: number): number;
}

In the ts component, I have:

/// <reference path="./cube.d.ts" />
import Cube from './cube';
...
        const my = new Cube();
        console.log(my.cube(10));

answered Mar 20, 2017 at 20:49

Enayat

4,0621 gold badge35 silver badges52 bronze badges

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

1 Comment

jaredbaszler Over a year ago

Just a comment for anyone else coming here as a newbie to TS. I had to also turn on the flag in tsconfig.json "declaration": true to make this solution work.

Majesty · Accepted Answer · 2017-03-20 15:03:46Z

0

This works for me

import model = require('../../model');

And in my component

model.functionName();

answered Mar 20, 2017 at 15:03

Majesty

2,0895 gold badges32 silver badges57 bronze badges

1 Comment

Enayat Over a year ago

Error--> Cannot find name 'require'.) . Even after writing: declare var require: any; I have the above-mentioned error.

Collectives™ on Stack Overflow

Importing a JavaScript function in TypeScript and AngularJS 2

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related