如何在Script Lab中引用TypeScript类库并实例化Log类？

你的核心问题是编译后的JS为ES模块格式，用普通<script>标签引入后，导出的Log类不会暴露到全局环境，导致Script Lab脚本无法直接访问。以下是几种可行的解决方法：

方法一：调整TS编译配置，输出全局可用的代码 #

修改tsconfig.json，将编译目标设置为IIFE（立即执行函数）格式，让类自动挂载到全局对象：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "IIFE",
    "outFile": "./log.js",
    "strict": true,
    "lib": ["ES2015", "DOM"]
  }
}

重新编译后，输出的log.js会自动把Log类挂载到window对象上。此时用<script src="https://somedomain.com/log.js"></script>引入后，就能在Script Lab中直接实例化：

const log = new Log();
console.log(log.ping()); // 输出 "pong"

方法二：手动修改编译后的JS，添加全局挂载 #

如果不想改动TS配置，直接在编译好的log.js末尾添加一行代码，把Log挂到全局：

// 在export { Log };之后添加
window.Log = Log;

修改后重新部署，引入后就能在Script Lab中直接使用new Log()。

方法三：用ES模块方式导入 #

如果Script Lab支持ES模块，可以把引入脚本的标签改为模块类型：

<script type="module" src="https://somedomain.com/log.js"></script>

然后在Script Lab的脚本中通过import导入类：

import { Log } from 'https://somedomain.com/log.js';
const log = new Log();
console.log(log.ping());

注意：这种方式需要确保你的服务器支持CORS（跨域资源共享），否则可能会出现加载错误。

另外，之前你尝试在Script Lab的库标签页直接引用TS文件不可行，因为Script Lab无法直接解析编译TS文件，必须使用编译后的JS文件。

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