unable to use any plugins with Typescript

peterhalicky commented 2 years ago

It is not possible to use any of the provided plugins with Typescript (well - I've tried two). The following code:

import jsep from 'jsep';
import comment from '@jsep-plugin/comment';
import assignment from '@jsep-plugin/assignment';
jsep.plugins.register(comment);
jsep.plugins.register(assignment);

Produces errors by tsc:

index.ts:4:23 - error TS2345: Argument of type 'typeof import("/Users/.../jsep-plugin-issue/node_modules/@jsep-plugin/comment/types/tsd")' is not assignable to parameter of type 'IPlugin'.
  Types of property 'init' are incompatible.
    Type '(this: typeof jsep) => void' is not assignable to type '(this: typeof import("jsep")) => void'.
      The 'this' types of each signature are incompatible.
        Property 'default' is missing in type 'typeof import("jsep")' but required in type 'typeof jsep'.

4 jsep.plugins.register(comment);
                        ~~~~~~~

index.ts:5:23 - error TS2345: Argument of type 'typeof import("/Users/.../jsep-plugin-issue/node_modules/@jsep-plugin/assignment/types/tsd")' is not assignable to parameter of type 'IPlugin'.
  Types of property 'init' are incompatible.
    Type '(this: typeof jsep) => void' is not assignable to type '(this: typeof import("jsep")) => void'.
      The 'this' types of each signature are incompatible.
        Property 'default' is missing in type 'typeof import("jsep")' but required in type 'typeof jsep'.

5 jsep.plugins.register(assignment);
                        ~~~~~~~~~~

Found 2 errors in the same file, starting at: index.ts:4

The only way I found to work around this is to use jsep.plugins.register(comment as unknown as IPlugin), although that seems to be a bit ugly.

When I modified the plugin's tsd.d.ts and changed the first line import * as jsep from 'jsep'; to import jsep from 'jsep'; then the compiler error disappeared. This is probably the way to fix the issue, although I will leave it to the authors to decide if that is the right solution.

Code/project to reproduce the problem can be found here: https://github.com/peterhalicky/jsep-plugin-issue

6utt3rfly commented 2 years ago

@peterhalicky - the import jsep from 'jsep' (vs import * as jsep from 'jsep') would require the esModuleInterop typescript option enabled... which might not be so bad since the readme indicates examples of that form.

Alternately, I tried this and it seems to work:, and it might have less impact to existing users

import * as jsep from 'jsep';
import { IPlugin } from 'jsep';
// ...plugin

declare const _export: IPlugin;
export default _export;

Any thoughts on something like this?

peterhalicky commented 2 years ago

I'm no expert on TS, but if I understand this correctly, you redeclare the type of the export to be IPlugin, essentially doing more of what I did as a workaround (xyz as unknown as IPlugin), right? Either way, I do not feel competent to judge if this is the right solution - but if it works, it's good enough for me. (Note: I do have the esModuleInterop option enabled)