javascript - 使 typescript 函数可用于窗口命名空间

Question

我目前正在研究 typescript 和 webpack，但现在我不知道如何解决这个问题:

我想在提交表单时调用 typescript 类中的函数。目前还没有涉及任何魔法，但我只是不知道如何使我的表单可以访问该功能，我经常面临该函数未定义的问题，因此必须缺少一些东西才能使其可供表单使用窗口命名空间。

这是我的 .ts 文件:

class Login {

    loginAccount() {
        console.log("test");
        debugger;
    }
};

export const login = new Login();

如你所见，这里没有魔法。我现在只是想接听电话。

这个文件像这样导入到我的 webpack 中(在我的 index.ts 中):

导入'./Login/login.ts';

我的 html 文件中的表单如下所示:

<form onsubmit="login.LoginAccount(); return false;">
    Email: <input type="text" name="email"><br>
    Password: <input type="text" name="password"><br>
    <input type="submit" name="Submit" value="Submit"/>
</form>

我就是无法让它发挥作用。我确信解决方案相当简单，但经过 30 分钟的谷歌搜索后，我主要找到了以手提钻方式处理此问题的解决方案。

Answer 1

Webpack 并不支持 window 命名空间中的所有导出。您可以在代码中显式执行此操作。

class Login {
  loginAccount() {
    console.log("test");
    debugger;
  }
};
const login = new Login();
// as it's typescript you'd probably need (window as any).login = login 
window.login = login 
export { login };