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?

Answer 1

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));

Answer 2

This works for me

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

And in my component

model.functionName();