0

My final goal is to integrate steelseries.js (https://github.com/HanSolo/SteelSeries-Canvas) in a Grafana plugin written in react. A long way to go ...
Currently, I am trying to import the steelseries var in a ts class.
To sum up, I have a JS file (more than 10 000 lines) that has the following structure :

var helloWorld = (function() {

    var helloDisplay = function () {
        console.log("Hello World");
    }
    return {msgDisplay : helloDisplay}

}) ();

And I want to import it in a TS class like that :

// how to import my JS script in myJs ?

class MyClass {
    ...
    tsHello (): void {
        myJs.msgDisplay()
    }
}

What is the simplest and/or the most efficient way to do that (JS File is very long)? (My class is in a TS file. I tried many things, I added .d.ts file but without success).

Stef1611
  • 1,978
  • 2
  • 11
  • 30
  • have you tried to `export default class MyClass{...}`? – Lhew Jan 09 '20 at 09:42
  • @Lhew. The problem is not to export MyClass. I know how to do that. The problem is importing the JS variable `helloWorld` that is initialized by an IIFE and contains field inside that are functions. – Stef1611 Jan 09 '20 at 09:45
  • Does this answer your question? [How to use javascript in typescript](https://stackoverflow.com/questions/38318542/how-to-use-javascript-in-typescript) – Peter B Jan 09 '20 at 09:56
  • @Peter.Thanks for answer. I read it but my problem is the IIFE. I think the solution is here (https://stackoverflow.com/q/54225603/7462275). See my comment in the Lhew answer. Do you think, the solution is in this post ? – Stef1611 Jan 09 '20 at 10:03

2 Answers2

1

Not sure, it is the best way but it works and it is simple.

  1. tsconfig.json file :
    "compilerOptions": { "target": "es5", "module": "es6", "strict": true, }
  2. In js file : add export
    export var helloWorld = (function() { ...
  3. Create a .d.ts file with same name as the js file
    export var helloWorld: any;

  4. Import it in the ts file
    import { helloWorld as myJs } from './varIIFE' class MyClass { tsHello () {myJs.msgDisplay()} } let myInstance = new MyClass(); myInstance.tsHello()

  5. Add module attribute in index.html to the generated js file
    <script src="compilatedfile.js" type="module"></script>

Stef1611
  • 1,978
  • 2
  • 11
  • 30
0

Does this help you?

interface HelloWorld{
  msgDisplay():void,
  foo:string,
  baz: number
}

var helloWorld = (function():HelloWorld {

  var helloDisplay = function () {
      console.log("Hello World");
  }
  return {
    msgDisplay : helloDisplay,
    foo: 'bar',
    baz: 123
  }

})()
Lhew
  • 584
  • 9
  • 22
  • Thanks for answer. The problem there are a lot of return fields. I want to use the steelseries.js file (https://github.com/HanSolo/SteelSeries-Canvas) in a react application written in tsx. In read a post where fs and eval() is used (https://stackoverflow.com/q/54225603/7462275) but I did not succeed to use it. I am working on it. – Stef1611 Jan 09 '20 at 09:58