I have a TypeScript file named listeners.ts that defines event listeners like this:
export function TimeField_OnChange () {
// ...
}
There is an index.html in which I want to use this function like this (which doesn't work):
document.getElementById("timeFieldCheckBox").addEventListener("change", TimeField_OnChange);
The browsers JavaScript engine cannot find the function. How do I reference it correctly?
This example shows how you can add event listeners to dom elements, without having any code in index.html. The listener and the handler are inside two different modules.
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();
bundling
Now you have to bundle your *.ts files into one main.js file using webpack. You need webpack because otherwise import and export won't work.
You can also bundle just using tsc but then you have to leave out import and export. It will still work, and you can still have your handler in a different .ts file. The only difference with webpack is that now your TimeField_OnChange and initPage functions will be in the global scope.
index.html
The html file only contains a link to the main.js file.
<script src="js/main.js"></script>
<script> tag in your HTML that isn't part of your module build process, then you COULD make your function available to the global window by using: window.TimeField_OnChange = .... Then you can call it from anywhere you want. Of course, the whole idea of modules is that you don't pollute the global scope. It would be better not to have any javascript in your HTML file. Why do you need that?main.ts file (not in any function, but right at the beginning of the file), which is the first one included into index.html by the module loader (require.js).
exportall variables are scoped inside IIFE to prevent them bleeding to global scope. So they will not be available on HTML page. You can create a global variable and assign this variable to it to access on HTML but you should not do it. Ideally this operation should be a part of some component and it should be there.