如何将IIFE初始化的JS变量导入TS类？Grafana插件集成场景

我来帮你搞定这个问题！在React+TypeScript的Grafana插件里导入这种IIFE格式的老JS库，其实有几种简单靠谱的方法，我给你一步步拆解：

方法一：快速全局声明（最省事的入门方案） #

因为这类IIFE脚本会把变量直接挂载到window对象上，我们可以直接告诉TypeScript这个全局变量的类型，就能直接用了：

1. 先引入JS文件：
   你可以在插件的public/index.html里直接添加脚本引用：

   <script src="./path/to/steelseries.js"></script>
   

   或者如果用Grafana的插件构建工具，也可以在grafana-plugin.json的includes里添加这个脚本路径。

2. 声明全局变量类型：
   在你的TS文件顶部，或者创建一个单独的global.d.ts文件，添加以下代码：

   declare global {
     interface Window {
       // 这里对应你的IIFE导出的变量名，比如helloWorld
       helloWorld: {
         msgDisplay: () => void;
         // 可以把steelseries.js里的其他方法也补充进来
       };
     }
   }
   
   // 必须加这行让TS识别这个模块
   export {};
   

3. 在类里直接调用：
   现在你就可以在TypeScript类里直接用了：

   class MyClass {
     tsHello(): void {
       window.helloWorld.msgDisplay();
     }
   }
   

   这个方法零配置，最快能跑起来，适合快速验证功能。

方法二：完善的类型定义文件（长期维护推荐） #

如果你之前试了.d.ts没成功，大概率是类型文件的写法不对。正确的姿势是：

1. 创建类型定义文件：
   新建一个steelseries.d.ts文件，和你的JS文件放在同一目录，内容如下：

   // 声明IIFE导出的变量类型
   declare const helloWorld: {
     msgDisplay: () => void;
     // 这里可以根据steelseries.js的API补充所有类型，比如仪表盘的创建方法等
   };
   
   export default helloWorld;
   

2. 配置构建工具（可选但重要）：
   因为是IIFE全局变量，需要告诉Webpack（Grafana插件用Webpack构建）这个模块对应的全局变量。在webpack.config.js里添加：

   module.exports = {
     // ...其他已有配置
     externals: {
       // 键是你导入时用的模块名，值是全局变量名
       'steelseries': 'helloWorld'
     }
   };
   

3. 导入并使用：
   现在就能像正常模块一样导入了：

   import helloWorld from './steelseries';
   
   class MyClass {
     tsHello(): void {
       helloWorld.msgDisplay();
     }
   }
   

方法三：CommonJS require导入（兼容老项目） #

如果你的项目允许用CommonJS语法，也可以直接用require导入：

const helloWorld = require('./steelseries.js');

class MyClass {
  tsHello(): void {
    helloWorld.msgDisplay();
  }
}

同时在steelseries.d.ts里补充模块声明：

declare module './steelseries.js' {
  const helloWorld: {
    msgDisplay: () => void;
  };
  export default helloWorld;
}

额外注意事项（针对Grafana插件） #

• 如果用@grafana/create-plugin生成的项目，记得把steelseries.js放到public目录下，避免构建时被打包进去（因为是全局脚本）。
• 要是遇到类型报错，检查一下tsconfig.json里的include字段有没有包含你的.d.ts文件。

内容的提问来源于stack exchange，提问作者Stef1611