How can I use a constant from my Typescript in html?

Question

In my Index.ts I am creating two constants that I want to use in my html file.

index.ts:

import React from 'react';

console.log("Hello World!");

const enableDropping = (event: React.DragEvent<HTMLDivElement>) => {
  event.preventDefault();
}

const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
  const id = event.dataTransfer.getData('text');
  console.log(`Somebody dropped an element with id: ${id}`);
}

index.html:

<div class="drag" onDragOver={enableDropping} onDrop={handleDrop}>Drop</div>

But I get the error message:

Uncaught ReferenceError: enableDropping is not defined at HTMLDivElement.ondragover

So somehow my constants are not recognized. The output "Hello World!" works.

Answer 1

Not sure, why TS doesn't have same codeblock or same file, coz you can combine them. If you want treat it differently. You can attach a listener onto your typescript file directly using queryselector or i think you can use this approach, How to call and form a React.js function from HTML