在HTML中使用TypeScript对象的正确方法——解决点击元素报错问题

Hey there! Let's break down why you're hitting this error and get your click handler working smoothly.

The Root Cause #

When you use Webpack to bundle your TypeScript code, all your logic runs inside a module scope—not the global browser scope. That means the myApp object you created in your TS files isn't accessible to the global window object, which is what your HTML's inline onclick attribute is trying to reference.

Solutions to Try #

1. Mount myApp to the Global window Object

If you want to keep using inline onclick in your HTML, you need to explicitly expose myApp to the global scope. Here's how:

First, let's say this is your TypeScript class:

// MyApp.ts
export class MyApp {
  handleClick(): void {
    console.log("Element clicked successfully!");
  }
}

In your main.ts, after instantiating the class, attach it to window:

import { MyApp } from "./MyApp";

const myApp = new MyApp();

// Option 1: Quick fix with type assertion
(window as any).myApp = myApp;

// Option 2: More type-safe (extend Window interface)
interface Window {
  myApp: MyApp;
}
window.myApp = myApp;

Now your HTML's <div onclick="myApp.handleClick()">Click Me</div> will find the myApp object in the global scope.

2. Use Event Listeners (Recommended Best Practice)

Inline onclick attributes aren't ideal for maintainable code. Instead, attach the click handler directly in your TypeScript code—this keeps all your logic in one place and avoids global scope pollution.

First, give your HTML element an ID:

<div id="clickableDiv">Click Me</div>

Then in main.ts, fetch the element and add a listener:

import { MyApp } from "./MyApp";

const myApp = new MyApp();
const clickableElement = document.getElementById("clickableDiv");

// Always check if the element exists to avoid null errors!
if (clickableElement) {
  clickableElement.addEventListener("click", () => {
    myApp.handleClick();
  });
}

This approach is cleaner, more modular, and aligns better with TypeScript's design principles.

3. Configure Webpack to Expose a Global Library (Less Recommended)

You can tweak your Webpack config to make your bundle export a global variable. This works but isn't great for larger projects since it adds unnecessary global variables.

In your webpack.config.js:

module.exports = {
  // ... other configs
  output: {
    filename: "bundle.js",
    library: "myApp", // Name of the global variable
    libraryTarget: "window" // Attach it to the window object
  }
};

Then in main.ts, export your instance as the default:

import { MyApp } from "./MyApp";
export default new MyApp();

Your HTML's inline onclick will now work, but again—stick with option 2 if you can!

Final Notes #

As a TypeScript beginner, getting comfortable with module scope vs global scope is key. The event listener approach (option 2) will save you from future headaches with scope and maintainability.

内容的提问来源于stack exchange，提问作者Tim