如何将由 JS 文件中的 IIFE 初始化的 var 导入到 TS 类？

Posted 2023-02-16

【中文标题】如何将由 JS 文件中的 IIFE 初始化的 var 导入到 TS 类？

【英文标题】：How to import a var initialized by an IIFE in JS File to a TS class?

【发布时间】：2020-04-26 20:51:29

【问题描述】：

我的最终目标是将 steelseries.js (https://github.com/HanSolo/SteelSeries-Canvas) 集成到一个用 react 编写的 Grafana 插件中。任重而道远... 目前，我正在尝试在 ts 类中导入 steelseries var。 综上所述，我有一个 JS 文件（超过 10 000 行），其结构如下：

var helloWorld = (function() 

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

) ();

我想将它导入到这样的 TS 类中：

// how to import my JS script in myJs ?

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

最简单和/或最有效的方法是什么（JS 文件很长）？ （我的课程在一个 TS 文件中。我尝试了很多东西，我添加了 .d.ts 文件但没有成功）。

【问题讨论】：

你试过export default class MyClass...吗？

@Lhew。问题不在于导出 MyClass。我知道该怎么做。问题在于导入由 IIFE 初始化的 JS 变量 helloWorld，其中包含函数字段。

这能回答你的问题吗？ How to use javascript in typescript

@Peter。感谢您的回答。我读过它，但我的问题是 IIFE。我认为解决方案就在这里（***.com/q/54225603/7462275）。请参阅我在 Lhew 答案中的评论。您认为，解决方案在这篇文章中吗？

【参考方案1】：

这对你有帮助吗？

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
  

)()

【讨论】：

感谢您的回答。问题有很多返回字段。我想在用 tsx 编写的 react 应用程序中使用 steelseries.js 文件 (github.com/HanSolo/SteelSeries-Canvas)。在阅读使用 fs 和 eval() 的帖子（***.com/q/54225603/7462275）但我没有成功使用它。我正在努力。

【参考方案2】：

不确定，这是最好的方法，但它有效且简单。

tsconfig.json 文件："compilerOptions": "target": "es5", "module": "es6", "strict": true, 在js文件中：添加导出export var helloWorld = (function() ... 创建一个与js文件同名的.d.ts文件export var helloWorld: any;

在ts文件中导入import helloWorld as myJs from './varIIFE' class MyClass tsHello () myJs.msgDisplay() let myInstance = new MyClass(); myInstance.tsHello()

将index.html中的module属性添加到生成的js文件中<script src="compilatedfile.js" type="module"></script>