如何从HTML页面调用TypeScript编译打包生成模块内的自定义函数

核心结论 #

默认情况下无法直接调用callSomeFunction方法，具体原因和解决方案如下：

原因说明 #

所有主流模块化规范（包括SystemJS、ES Module、CommonJS等）都默认开启作用域隔离，你在Main.ts中声明的callSomeFunction属于模块内部私有方法，不会自动暴露到浏览器的window全局作用域，直接在全局上下文调用会抛出callSomeFunction is not defined的错误。

注意：你的示例代码存在两处语法问题，需要先修正才能正常运行：

1. Calculator.ts导出的类名是小写calculator，但Main.ts导入时使用了大写Calculator，大小写不匹配
2. 类中的方法名为someFunction，调用时写为了somefunction，大小写不匹配

可选实现方案 #

方案1：手动挂载到全局对象 #

就是你提到的写法，不过TypeScript环境下需要先扩展Window接口避免类型报错：

// Main.ts 新增类型声明
declare global {
  interface Window {
    callSomeFunction: () => void;
  }
}

window.callSomeFunction = callSomeFunction;

该方案实现简单，但会污染全局作用域，适合小型项目使用。

方案2：通过模块加载API调用（推荐，无全局污染） #

如果你使用SystemJS作为模块加载器，可以先把callSomeFunction从模块中导出，再在HTML中通过SystemJS的导入API调用：

// Main.ts 导出方法
export function callSomeFunction() {
  // 原有逻辑
}

在HTML中调用：

<script>
System.import('Main').then(module => {
  module.callSomeFunction();
});
</script>

如果你的打包产物是ES Module格式，直接用原生ES导入调用即可：

<script type="module">
import { callSomeFunction } from './bundle.js';
callSomeFunction();
</script>

方案3：配置打包工具暴露全局命名空间 #

如果你使用Rollup、Webpack等打包工具，可以配置打包产物为UMD格式，指定全局导出的命名空间，打包工具会自动将模块导出内容挂载到全局对象上，不需要手动编写挂载代码，同时只会新增一个全局变量，污染程度远低于直接挂载零散方法。

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