What is the best way to bring in a variable initialized by an IIFE from a JavaScript file into a TypeScript class?

Question

What is the best way to bring in a variable initialized by an IIFE from a JavaScript file into a TypeScript class?

I'm currently working towards integrating the steelseries.js library (found at https://github.com/HanSolo/SteelSeries-Canvas) into a Grafana plugin built with React. It's quite a complex task, but I'm up for the challenge.
Right now, my main focus is on importing the steelseries variable into a TypeScript class.
Essentially, I have a large JavaScript file (over 10,000 lines) structured like this:

var helloWorld = (function() {

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

}) ();

My goal is to import this script into a TypeScript class as shown below:

// how to import my JS script in myJs ?

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

I'm looking for the simplest and most efficient way to achieve this, considering the length of the JS file. (I've tried various methods, including adding .d.ts files, but haven't had much success so far).

javascript typescript grafana iife

Answer 1

Answer №1

Maybe not the most conventional approach, but it gets the job done effectively and easily.

Include configuration in tsconfig.json file :

"compilerOptions": {
     "target": "es5",
     "module": "es6",
     "strict": true,
 }

Add export statement in your JavaScript file:
```
export var helloWorld = (function() { ...
```
Create a corresponding .d.ts file for typings:
export var helloWorld: any;

Import the module in your TypeScript file:

import { helloWorld as myJs } from './varIIFE'
 class MyClass {
     tsHello () {myJs.msgDisplay()}
 }
let myInstance = new MyClass();
myInstance.tsHello()

Modify HTML to include the generated JavaScript file with module attribute:
```
<script src="compilatedfile.js" type="module"></script>
```

Answer 2

Maybe not the most conventional approach, but it gets the job done effectively and easily.

Include configuration in tsconfig.json file :

"compilerOptions": {
     "target": "es5",
     "module": "es6",
     "strict": true,
 }

Add export statement in your JavaScript file:
```
export var helloWorld = (function() { ...
```
Create a corresponding .d.ts file for typings:
export var helloWorld: any;

Import the module in your TypeScript file:

import { helloWorld as myJs } from './varIIFE'
 class MyClass {
     tsHello () {myJs.msgDisplay()}
 }
let myInstance = new MyClass();
myInstance.tsHello()

Modify HTML to include the generated JavaScript file with module attribute:
```
<script src="compilatedfile.js" type="module"></script>
```

Answer 3

Answer №2

Are you finding this beneficial?

interface Greetings{
  displayMessage():void,
  bar:string,
  count: number
}

var greetings = (function():Greetings {

  var messageDisplay = function () {
      console.log("Hello World");
  }
  return {
    displayMessage : messageDisplay,
    bar: 'foo',
    count: 456
  }

})()

Answer 4

Are you finding this beneficial?

interface Greetings{
  displayMessage():void,
  bar:string,
  count: number
}

var greetings = (function():Greetings {

  var messageDisplay = function () {
      console.log("Hello World");
  }
  return {
    displayMessage : messageDisplay,
    bar: 'foo',
    count: 456
  }

})()

What is the best way to bring in a variable initialized by an IIFE from a JavaScript file into a TypeScript class?

Answer №1

Answer №2

Similar questions

Ever since I switched to a different monitor, my Javascript has suddenly stopped functioning

Methods for invoking a JavaScript function from TypeScript within an Angular2 application

Generating a unique user ID similar to Zerodha's user ID using Node.js/JavaScript

Access the value of a submitted form using jQuery, when there are multiple forms with identical class names

Sliding the container with a width adjustment and left margin fails to display all images

Flex-Layout in Angular - The Ultimate Combination

Is there a way to send arguments to a pre-existing Vue JS application?

Generate real-time dynamic line charts using data pulled directly from a MySQL database

Changing global properties in VueCli

Adjust the size of an Angular component or directive based on the variable being passed in

Leveraging Angular js for performing operations in Putty

After clicking on the "Delete Rows" button in the table, a white color suddenly fills the background in Angular Material

Passing an undefined value to the database via AJAX upon clicking a button

Error message: "The toJSON method is not found for the item in the nested array of

Puppeteer exhibiting unexpected behavior compared to the Developer Console

Creating a customized TextField look with styled-components and Material-UI's withStyles feature

Assembly of these elements

Initiating an Ajax POST request when the onblur() event is triggered

Component fails to update when attribute is modified

What is the method for specifying a null value in Typescript?