How Do I override a Javascript Method In Typescript Code?

791 views Asked by At

I am using draw2d-js, wherein I need the onMouseEnter() functionality. The docs suggest that I override the onMouseEnter:

  /**
     * @method
     * Callback method for the mouse enter event. Usefull for mouse hover-effects.
     * Override this method for your own effects. Don't call them manually.
     *
     * @template
     **/
    onMouseEnter: function()
    {
    },
    

I have tried: (file: on_mouse_enter.ts):

const draw2d = require('draw2d');

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


However, I get the error:

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 {
             ~~~~~~~~~~~~


I want to override only one method from the draw2s.Figure class: the onMouseEnter() method.

1

There are 1 answers

1
O oLo O On

Thanks for the help, @Silvio Mayolo.

The final solution looks like this:

// client, the caller
  let _customEdge = new CustomEdge();
  _customEdge.onMouseEnter(_con);

The implementation of onMouseEnter looks like so:

const draw2d = require('draw2d');

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

The function works correctly when mouse enters the designated area on the screen.