TypeScript：调用父类函数遇报错及点击事件未触发，求助解决方案

Let's fix these issues step by step, starting with the TSLint errors and then ensuring your click event works as expected:

1. 修复"unused expression" TSLint错误 #

TSLint flags this because you're creating an InputHandler instance but not storing it anywhere — it sees this as a throwaway, meaningless expression. The fix is to add a class property to Nodes to hold the InputHandler instance:

Update your nodes.tsx:

import { InputHandler } from './inputHandler';

class Nodes {
  canvasWidth: number;
  canvasHeight: number;
  inputHandler: InputHandler; // Add this property to store the instance

  constructor(width: number, height: number) {
    this.canvasWidth = width;
    this.canvasHeight = height;
    this.inputHandler = new InputHandler(this); // Assign instance to the class property
  }

  clicked() {
    console.log('clicked');
  }
}

export { Nodes };

2. 修复"no-any" TSLint错误 #

Using any removes TypeScript's type safety. We can replace it with a precise type — either directly referencing the Nodes class, or a flexible interface if you want InputHandler to work with other classes later.

Option 1: Use the Nodes type directly #

Update your inputHandler.ts:

import { Nodes } from './nodes'; // Import the Nodes type

class InputHandler {
  constructor(nodes: Nodes) { // Replace 'any' with Nodes
    document.addEventListener('click', (event) => {
      nodes.clicked();
    });
  }
}

export { InputHandler };

Option 2: Define a reusable interface (more flexible) #

If you might want InputHandler to work with other classes that have a clicked() method, define an interface:

// Define an interface for objects that can respond to clicks
interface Clickable {
  clicked(): void;
}

class InputHandler {
  constructor(nodes: Clickable) { // Use the interface as type constraint
    document.addEventListener('click', (event) => {
      nodes.clicked();
    });
  }
}

export { InputHandler };

The Nodes class automatically satisfies this interface since it has a clicked() method, no extra code needed.

3. Ensure the clicked() method triggers on click #

The above fixes should already resolve this, but double-check one critical detail: you need to instantiate the Nodes class somewhere in your app. Without creating a Nodes instance, the InputHandler constructor never runs, so no click event listener is added.

For example, in your app entry file:

import { Nodes } from './nodes';

// Create a Nodes instance with your canvas dimensions
const nodesInstance = new Nodes(800, 600);

Now clicking anywhere on the document will trigger the clicked() method. If you only want to listen for clicks on your canvas, replace document.addEventListener with your canvas element's addEventListener call instead.

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