Handsontable.plugins.BasePlugin cannot be extended: TS 2507: Base is not a constructor function type

[imageslr]

Description

While trying to create a custom plugin using ts, I found that class Base declared in handsontable.d.ts cannot be extended.

Steps to reproduce

just simple codes:

import Handsontable from 'handsontable';
const { registerPlugin } = Handsontable.plugins

class InternalPluginSkeleton extends Handsontable.plugins.BasePlugin {
  constructor(hot) {
    super(hot)
  }
}

export {InternalPluginSkeleton};

// You need to register your plugin in order to use it within Handsontable.
registerPlugin('internalPluginSkeleton', InternalPluginSkeleton);

and I got an error: Type 'Base' is not a constructor function type.。

I believe this is similar with the issue #4326 . I wonder know how can I extend BasePlugin and implement my own plugin using ts, without having to build my own handsontable.full.js. Thanks for helping!

[imageslr]

After changing 2294 line in handsontable.d.ts:

interface Plugins {
+ BasePlugin: typeof plugins.Base;
- BasePlugin: plugins.Base
}

I solved the problem. But I'm not quite sure what problem this modify will cause.

[AMBudnik]

Hey @imageslr

I've asked about the feedback from our devs, but to check if that solution is the right one we'd need to have a demo where the issue can be replicable. Please share one.

[imageslr]

Hi, here is my demo, but I'm not sure whether it meets your need.

import Handsontable from "handsontable";

class CustomCellStyle extends Handsontable.plugins.BasePlugin {

}

and the error is ts: 2507 Base is not a constructor function type:

As a workaround I'm now using below declaration:

import Handsontable from "handsontable";

class CustomCellStyle extends (Handsontable.plugins.BasePlugin as any) {

}

and the error disappeared.

My handsontable version is"handsontable": "^7.1.0".

Thanks for your checking!

[AMBudnik]

I need something where the issue can be replicable. I was thinking about JSFiddle/CodePen or a .zip - what you'd find easier to share.

[imageslr]

I have tested it with only two files. The files are uploaded below. Thanks!

package.json

{
  "dependencies": {
    "@handsontable/react": "^3.0.0",
    "handsontable": "^7.1.0"
  }
}

index.tsx

import Handsontable from "handsontable";

/**
 * Execute the command below in shell:
 * 
 * tsc index.tsx --jsx --react
 *
 * and I got an error:



▶ tsc index.tsx --jsx react
index.tsx:10:43 - error TS2507: Type 'Base' is not a constructor function type.

10 export default class CustomPlugin extends Handsontable.plugins.BasePlugin {}
                                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 2 errors.


 */
export default class CustomPlugin extends Handsontable.plugins.BasePlugin {}

// ------------------------

/**
 * if I change the above line to the line above, compile success.
 * 


▶ tsc index.tsx --jsx react
../node_modules/handsontable/handsontable.d.ts:893:23 - error TS2583: Cannot find name 'WeakSet'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.

893       listenersCount: WeakSet<HTMLElement>;
                          ~~~~~~~


Found 1 error.


 */

// export default class CustomPlugin extends (Handsontable.plugins.BasePlugin as any) {}

tsc version

▶ tsc --version
Version 3.5.3

and the files are uploaded.
zip.zip

[AMBudnik]

Hey @imageslr

have you tried to build the plugin using our skeleton https://github.com/handsontable/handsontable-skeleton/blob/master/plugins/internal/internalPluginSkeleton.js
The file has all the comments that will help you to create a plugin.

[imageslr]

Yes I'm indeed follow the skeleton，except I'm using typescript and causing this problem. It's not a problem with codes, but maybe with handsontable's type definition file.

[AMBudnik]

This case needs further investigation. I'll ask our developer to check it.

[AMBudnik]

Hey :)

we've just published a PR that fixes the issue.

[imageslr]

Thanks ever so. Very quick fix😄

[AMBudnik]

You were the one to guide us :)

ps. please do not close it yet. We'll close it with the version update.

[AMBudnik]

Also released in v 7.2.0.