Question

我有一个名为List<Integer>的TypeScript文件，它定义了这样的事件监听器：

listeners.ts

我想要使用此功能export function TimeField_OnChange () { // ... }（无法正常工作）：

index.html

浏览器JavaScript引擎无法找到该功能。我如何正确引用它？

Answer 1

此示例显示如何向dom元素添加事件侦听器，而不在index.html中包含任何代码。监听器和处理程序位于两个不同的模块中。

<强> utils.ts

export function TimeField_OnChange (e:Event) {
   // your event handler here
}

<强> main.ts

import TimeField_OnChange from "./utils";

export function initPage () {
    // here you add listeners to dom elements
    let box = document.getElementById("timeFieldCheckBox");
    box.addEventListener("change", (e:Event) => TimeField_OnChange(e));
  }
}
// this is the starting point of your app
initPage();

<强>捆绑

现在，您必须使用webpack将*.ts文件捆绑到一个main.js文件中。您需要webpack，否则import和export将无效。

您也可以使用tsc进行捆绑，但之后必须省略import和export。它仍然有效，您仍然可以将处理程序放在不同的.ts文件中。与webpack的唯一区别是现在你的TimeField_OnChange和initPage函数将在全局范围内。

<强>的index.html

html文件只包含指向main.js文件的链接。

<script src="js/main.js"></script>

如何在HTML文件中调用TypeScript函数？

1 个答案: