使用模块系统时从HTML调用TypeScript函数的可行性咨询

当然可以！你遇到的问题本质是模块系统（比如CommonJS、ES Modules）会把你的TypeScript代码封装在独立的作用域里，不让全局环境直接访问——这其实是模块化的设计初衷，但确实会给从HTML直接调用带来麻烦。下面给你几个可行的解决方案，你可以根据项目情况选择：

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

这是最直接的临时方案，适合快速解决问题。你只需要在TypeScript文件里把需要暴露的类或函数挂载到浏览器的全局window对象上：

修改example.ts： #

export class Example {
  myFunction() { alert('Test'); }
}

// 把类挂载到window，TypeScript需要断言window为any避免类型报错
(window as any).Example = Example;

修改example2.ts： #

export function doSomething() { alert('Test2'); }

// 把函数挂载到window
(window as any).doSomething = doSomething;

这样你的HTML代码就可以正常访问Example类和doSomething函数了，不用修改原来的HTML代码。不过要注意，这种方式会污染全局命名空间，如果项目较大，容易和其他全局变量冲突。

方法2：通过Webpack配置暴露全局库 #

如果你用Webpack打包，可以通过配置让整个打包后的库暴露到全局，这样更规范，也能减少全局污染：

在webpack.config.js里添加output配置： #

module.exports = {
  // ...其他基础配置（entry、module.rules等）
  output: {
    filename: 'bundle.js',
    library: 'MyApp', // 自定义的全局库名称
    libraryTarget: 'window' // 把库挂载到window对象上
  }
};

然后在你的TypeScript入口文件里统一导出需要暴露的成员：

import { Example } from './example';
import { doSomething } from './example2';

// 统一导出给全局库
export { Example, doSomething };

之后HTML里的代码需要改成通过全局库访问：

<script>
  $(document).ready(function() {
    $('#test-btn').click(function(){
      var example = new MyApp.Example(); // 通过MyApp访问
      example.myFunction();
    });
  });
</script>
<!-- 修改链接的javascript伪协议 -->
<a href="javascript:MyApp.doSomething()">Click me too</a>

这种方式把所有暴露的成员都放到一个自定义的全局对象下，比直接挂载window更整洁，适合中大型项目。

方法3：用事件绑定替代javascript:伪协议（推荐） #

从模块化和代码可维护性的角度，不推荐使用javascript:伪协议——它不仅会打破模块化封装，还存在一些安全和可用性问题（比如无法被屏幕阅读器识别）。更好的做法是把链接改成普通元素，然后在TypeScript里绑定点击事件：

修改HTML： #

<!-- 把链接改成带id的普通a标签（或者按钮） -->
<a id="action-link" href="#">Click me too</a>

在TypeScript入口文件里绑定事件： #

import { Example } from './example';
import { doSomething } from './example2';

// 等DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', () => {
  // 绑定按钮点击事件
  const testBtn = document.getElementById('test-btn');
  if (testBtn) {
    testBtn.addEventListener('click', () => {
      const example = new Example();
      example.myFunction();
    });
  }

  // 绑定链接点击事件
  const actionLink = document.getElementById('action-link');
  if (actionLink) {
    actionLink.addEventListener('click', (e) => {
      e.preventDefault(); // 阻止默认跳转行为
      doSomething();
    });
  }
});

这样所有的逻辑都在TypeScript模块里，完全符合模块化的最佳实践，也避免了全局污染，代码更易于维护和调试。

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