Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeScript: svelte-kit package does not copy custom event payload types #1943

Closed
PuruVJ opened this issue Jul 18, 2021 · 4 comments
Closed
Labels
pkg:svelte-package Issues related to svelte-package types / typescript

Comments

@PuruVJ
Copy link
Contributor

PuruVJ commented Jul 18, 2021

Describe the bug

I'm using svelte-kit package command(which is amazing BTW, kudos to you folks for it 😍). In the component, I have defined createEventDispatcher types as below 👇

const dispatch =
    createEventDispatcher<{
      start: Window;
      drag: any;
      stop: any;
      mousedown: any;
    }>();

  dispatch('start', {} as Window);
  dispatch('drag');
  dispatch('stop');
  dispatch('mousedown');

the start event has payload of type Window (just for a sample demo, final would be different). So when I run the svelte-kit package command, everything works perfectly, the svelte component is generated flaelessly, the d.ts is also perfect, with the issue that that the custom types provides for the events are stripped away, and final output has type as any

events: {
        start: any;
        drag: any;
        stop: any;
        mousedown: any;
    } & {
        [evt: string]: any;
    };

start should've had the Window type

Reproduction

Target source code: https://github.com/PuruVJ/svelte-drag/blob/e1e73f2b44abb76b3e730543a8a89b35141fa74f/src/lib/DraggableCore.svelte#L68-L74

Logs

No response

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz
    Memory: 1.30 GB / 7.86 GB
  Binaries:
    Node: 14.16.1 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.12 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.1.0), Chromium (91.0.864.70)
    Internet Explorer: 11.0.22000.1
  npmPackages:
    @sveltejs/kit: ^1.0.0-next.131 => 1.0.0-next.131
    svelte: ^3.38.3 => 3.38.3

Severity

annoying

Additional Information

No response

@PuruVJ PuruVJ changed the title svelte-kit package does not copy custom event payload types TypeScript: svelte-kit package does not copy custom event payload types Jul 18, 2021
@dummdidumm
Copy link
Member

Is this working when using simple types like string or boolean? If so, you likely need to add DOM to the lib list in your tsconfig.json

@PuruVJ
Copy link
Contributor Author

PuruVJ commented Jul 18, 2021

@dummdidumm No, not working with string, number, boolean, undefined and null and even Symbol, so I guess the prblem is with any kind of type

@dummdidumm dummdidumm added the pkg:svelte-package Issues related to svelte-package label Jul 19, 2021
dummdidumm pushed a commit that referenced this issue Jul 19, 2021
This makes the DOM ambient typings available to the user without errors. This is not 100% correct because on the server most of the typings are not available, but as soon as you want to use one of these, you need to add this to the lib list anyway. It also makes the svelte-kit package command export the correct dispatcher event types (#1943).
@dummdidumm
Copy link
Member

You need to add DOM to the lib list in order to get the correct typings, else TS doesn't know what CustomEvent is. I updated create-svelte accordingly in #1956

dummdidumm added a commit that referenced this issue Jul 19, 2021
This makes the DOM ambient typings available to the user without errors. This is not 100% correct because on the server most of the typings are not available, but as soon as you want to use one of these, you need to add this to the lib list anyway. It also makes the svelte-kit package command export the correct dispatcher event types (#1943).
@PuruVJ
Copy link
Contributor Author

PuruVJ commented Jul 19, 2021

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pkg:svelte-package Issues related to svelte-package types / typescript
Projects
None yet
Development

No branches or pull requests

3 participants