如何从index.html调用TypeScript函数？求助解决未定义报错

原因分析 #

你遇到的问题本质是webpack的模块封装机制导致的：webpack默认会把所有编译后的代码包裹在一个独立的函数作用域（比如立即执行函数IIFE）里，你的inputChange函数只存在于这个局部作用域中，并没有挂载到全局的window对象上。而HTML中的内联事件（比如onchange）只能访问全局作用域下的函数，所以浏览器会报错"inputChange is not defined"。

至于你说其他TS代码能正常运行，是因为那些代码要么是在模块内部直接执行，要么是通过模块化的方式调用（比如DOM事件监听、异步回调等），不需要依赖全局作用域。

解决方案 #

方案1：手动将函数挂载到window全局对象（快速解决） #

最简单的方式就是把你的inputChange函数显式挂载到window上，这样HTML的内联事件就能访问到它了。修改你的main.ts：

function inputChange(){
    console.log('Hello World!')
}

// 用类型断言绕过TS的类型检查，将函数挂载到window
(window as any).inputChange = inputChange;

方案2：使用事件监听器替代内联事件（推荐，符合现代开发规范） #

内联事件其实是比较老旧的写法，更推荐在TS代码中通过addEventListener绑定事件，这样不需要暴露任何全局变量，更安全也更符合模块化开发思路：

首先修改index.html，给input加一个id以便获取元素：

<input id="my-input"/>

然后在main.ts中绑定事件：

function inputChange(){
    console.log('Hello World!')
}

// 等待DOM加载完成后获取元素并绑定事件
document.addEventListener('DOMContentLoaded', () => {
    const inputElement = document.getElementById('my-input');
    if (inputElement) {
        inputElement.addEventListener('change', inputChange);
    }
});

方案3：通过webpack配置暴露全局变量（适合多函数暴露场景） #

如果你需要暴露多个函数到全局，可以用webpack的expose-loader插件：

1. 先安装依赖：

npm install expose-loader --save-dev

2. 修改webpack配置文件，添加loader规则：

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./public/main.ts'), // 指向你的TS文件路径
        use: [{ loader: 'expose-loader', options: 'inputChange' }]
      }
    ]
  }
};

这种方式会自动把inputChange暴露到全局，不过配置相对复杂，一般小项目用前两种方案就足够了。

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