Vite+TypeScript中onclick调用deleteItem提示未定义的问题

问题 #

我基于无框架的Vite+TypeScript开发天气应用，想给每个天气列表项添加删除功能：点击删除按钮时将对应ID传入deleteItem函数，从savedWeatherList数组中删除该项，但触发点击时出现错误：

(index):29 Uncaught ReferenceError: deleteItem is not defined
    at HTMLButtonElement.onclick

我的main.ts里定义了如下deleteItem函数：

function deleteItem(clickedID: number): void {
  console.log("Item with the id of: " + clickedID + " was clicked!");
  savedWeatherList = savedWeatherList.filter((item) => {
    return item.id !== clickedID;
  });
}

同时在main.ts中通过代码为按钮添加onclick属性：

const deleteButton: HTMLElement = document.createElement("button");    
deleteButton.setAttribute("onclick", "deleteItem(item.id)");

HTML属性已正确添加，但script标签为module类型，放在head或body均无效，请问为何该函数未定义无法调用？

原因分析 #

因为你使用了ES模块（script标签添加了type="module"），模块内的变量和函数默认处于模块作用域，不会自动暴露到全局window对象上。而通过onclick属性绑定的代码，是在全局作用域下执行的，自然找不到仅存在于模块内部的deleteItem函数。另外你写的deleteItem(item.id)中的item也存在问题，该变量在全局作用域中同样不存在。

解决方案 #

方法1：用addEventListener绑定事件（推荐） #

直接给按钮添加点击事件监听器，利用闭包获取当前item的id，既不依赖全局作用域，还能避免变量污染：

const deleteButton: HTMLButtonElement = document.createElement("button");
// 假设此处存在当前操作的item对象
deleteButton.addEventListener('click', () => {
  deleteItem(item.id);
});

方法2：将函数暴露到全局（不推荐） #

如果一定要用onclick属性的方式，可以把deleteItem挂载到window对象上，同时确保item.id能正确传递：

// 在main.ts里把函数挂载到window全局对象
(window as any).deleteItem = deleteItem;

// 创建按钮时，将item.id作为字符串拼接进onclick属性
const deleteButton: HTMLElement = document.createElement("button");    
deleteButton.setAttribute("onclick", `deleteItem(${item.id})`);

这种方法会污染全局作用域，容易引发命名冲突，因此更推荐第一种方案。

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