uppy icon indicating copy to clipboard operation
uppy copied to clipboard

Typescript: Argument of type 'this' is not assignable to parameter of type 'typeof UIPlugin'

Open uncvrd opened this issue 2 years ago • 1 comments

In an attempt to create a custom Dashboard plugin using Typescript, the mount method requires passing this as the second parameter. However, I receive the following error:

Argument of type 'this' is not assignable to parameter of type 'typeof UIPlugin'.
  Property 'prototype' is missing in type 'UppyDashboardPlugin' but required in type 'typeof UIPlugin'.

My class is essentially a barebones Dashboard react component taken from the @uppy/react library, but just in Typescript:

class UppyDashboardPlugin extends UIPlugin {

    opts: DefaultPluginOptions;

    constructor(uppy: Uppy, opts?: DefaultPluginOptions | undefined) {
        super(uppy, opts);
        this.id = opts?.id ?? "UppyDashboardPlugin";
        this.type = "dashboard";

        this.opts = opts ?? {};
    }

    install = () => {
        const { target } = this.opts;
        if (!!target) {
            this.mount(target, this); <-- CODE ERRORS ON THIS LINE. Obviously if i @ts-ignore it, the component works but would rather avoid that.
        }
    }
}

Also just FYI, the documentation states that you only need to pass a target with mount, but the typings in Typescript require two args. (target and the this of the class): https://uppy.io/docs/writing-plugins/#BasePlugin

EDIT:

Here's a codesandbox reproduction: https://codesandbox.io/s/fancy-lake-bovb0t?file=/src/Dashboard.tsx

uncvrd avatar Apr 03 '22 22:04 uncvrd

Hi, thanks for the reproducible example. Are you willing to contribute a fix?

Murderlon avatar Apr 04 '22 04:04 Murderlon