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

我有一个名为

listeners.ts

的TypeScript文件，它定义了如下事件侦听器：

export function TimeField_OnChange () {
  // ...
}

有一个

index.html

，我想在其中像这样使用这个函数（不起作用）：

---

浏览器JavaScript引擎找不到该函数。如何正确引用它？

此示例演示如何将事件侦听器添加到dom元素，而无需index.html中的任何代码。侦听器和处理程序位于两个不同的模块内

utils.ts

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

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();

main.ts

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

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，因为否则

导入

和

导出

将无法工作

您也可以只使用

tsc

进行捆绑，但是您必须省去

import

和

export

。它仍然可以工作，并且您仍然可以将处理程序放在不同的.ts文件中。webpack唯一的区别是，现在您的TimeField_OnChange和initPage函数将在全局范围内

index.html

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

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

使用

export

时，所有变量的作用域都在IIFE内，以防止它们溢出到全局范围。所以它们在HTML页面上不可用。您可以创建一个全局变量并将此变量分配给它，以便在HTML上访问，但不应该这样做。理想情况下，这个操作应该是某个组件的一部分，并且应该在那里。@Rajesh:那么你认为什么是合理的解决方案呢？理想情况下，这个操作应该是组件的一部分，你应该在那里执行。如果我假设正确，则有一个接受时间的字段，您希望有一个复选框，在选择此字段时启用/禁用此输入字段。或者类似的东西。组件是指HTML文件吗？问题是，我还需要其他TypeScript文件中的函数，我不想重复代码。如果是，您将有一个组件/指令。如果没有，您可以创建一个全局变量，然后在那里使用它，因为它会更快。但是我也希望在其他TypeScript模块中使用该函数。然后您必须先导入该模块，然后才能使用它，请参见编辑。但是，如果我将该函数放入模块中，我将无法再在HTML文件中引用它，我可以吗？如果您的HTML中有一个

标记，而该标记不是模块构建过程的一部分，那么您可以使用：

window.TimeField\u OnChange=…

使您的函数可用于全局窗口。然后你可以在任何地方打电话。当然，模块的整体思想是不污染全局范围。最好不要在HTML文件中包含任何javascript。你为什么需要这个？谢谢你的另一个建议。目的不是复制代码。该函数用作事件侦听器，但在初始化控件时也用于其他地方。我通过在

main.ts

文件中附加事件侦听器（不是在任何函数中，而是在文件的开头）解决了这个问题，这是模块加载器（require.js）包含在index.html中的第一个事件侦听器。