如何在TypeScript代码中重写draw2d-js的onMouseEnter方法？

问题场景 #

使用draw2d-js时，想要实现鼠标进入元素的onMouseEnter效果，按照官方文档建议重写该方法，但编写TypeScript代码时触发TS4113错误：

Error: src/library/onMouseEnter.ts:7:12 - error TS4113: This member cannot have an 'override' modifier because it is not declared in the base class 'any'.

7   override onMouseEnter(): void {
             ~~~~~~~~~~~~

原因分析 #

这个错误的核心是TypeScript无法识别draw2d.Figure基类中存在onMouseEnter方法：

• 要么是draw2d-js的官方TypeScript类型定义（@types/draw2d）没有包含该方法的声明；
• 要么是使用require导入导致TypeScript将draw2d.Figure推断为any类型，无法检测到基类的方法存在。

解决方案 #

方案1：移除override关键字 #

由于draw2d-js本身是JavaScript库，运行时会自动调用实例上的onMouseEnter方法，即使TypeScript无法识别基类的该方法，直接移除override关键字即可正常实现功能：

const draw2d = require('draw2d');

export class CustomEdge extends draw2d.Figure {
  onMouseEnter(): void {
    console.log('Mouse Entered');
  }
}

方案2：扩展类型定义（严格类型检查场景） #

如果需要保持TypeScript的类型严格性，可以手动扩展draw2d的类型定义：

1. 在项目中创建一个类型声明文件（比如src/types/draw2d.d.ts）
2. 添加以下内容：

declare module 'draw2d' {
  export class Figure {
    onMouseEnter(): void;
    // 若需要其他未声明的方法，也可在此补充
  }
}

3. 确保tsconfig.json的include数组包含该类型文件，让TypeScript可以识别基类的onMouseEnter方法，此时就可以正常使用override关键字了。

方案3：改用ES模块导入 #

如果draw2d-js支持ES模块导入，替换require为import可以帮助TypeScript更好地识别类型：

import * as draw2d from 'draw2d';

export class CustomEdge extends draw2d.Figure {
  override onMouseEnter(): void {
    console.log('Mouse Entered');
  }
}

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