javascript - How to call a TypeScript function in an HTML file? - Stack Overflow

admin管理员组

文章数量:1313275

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?

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?

• javascript
• html
• typescript

Share Improve this question Follow edited Apr 26, 2019 at 15:58 Krisztián Balla asked Aug 1, 2017 at 10:06 Krisztián BallaKrisztián Balla 20.4k1313 gold badges7676 silver badges9090 bronze badges 6

• 1 When you use export all 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 ponent and it should be there. – Rajesh Commented Aug 1, 2017 at 10:08
• @Rajesh: So what would be a reasonable solution in your opinion? – Krisztián Balla Commented Aug 1, 2017 at 10:11
• Ideally, this should be a part of ponent and you should do this operation there. If I assume correct, there is a field that accepts time and you wish to have a checkbox that enable/disable this input field on selection of this field. or something like this. – Rajesh Commented Aug 1, 2017 at 10:11
• By ponent you mean the HTML file? The thing is that I also need the function in other TypeScript files and I don't want to repeat the code. – Krisztián Balla Commented Aug 1, 2017 at 10:13
• When you say you are using TS, I assumed, you are using React/Angular. If yes, you will have a Component/Directive. If not, you can just create a global variable and use it from there as it will be faster – Rajesh Commented Aug 1, 2017 at 10:15

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 2

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>

本文标签： javascriptHow to call a TypeScript function in an HTML fileStack Overflow