language-tools icon indicating copy to clipboard operation
language-tools copied to clipboard

Typescript createEventDispatcher does not propagate event types correctly

Open aliak00 opened this issue 3 years ago • 0 comments

Describe the bug

Hey there! I'm seeing some strange behavior in a sveltekit project with typescript enabled when using createEventDispatcher.

The types of a custom event only seem to propagate if they are declared inline when calling createEventDispatcher.

I.e. dispatch1 breaks typings and dispatch2 works great.

import { createEventDispatcher } from 'svelte';
type Events = {
  event1: {
    value: string;
  };
};
const dispatch1 = createEventDispatcher<Events>();
const dispatch2 = createEventDispatcher<{
  event2: {
    value: string;
  };
}>();

There result of using a component that dispatches the above events:

<Component
  on:event1={(e) => {
    // No error because it's typed as any
    console.log(e.detail.gagagaga);
  }}
  on:event2={(e) => {
    // Error because e is correctly typed
    console.log(e.detail.gagagaga);
  }}
/>

Reproduction

https://github.com/aliak00/tmp-sveltekit-custom-event-types

Logs

❯ npm run check

> [email protected] check
> svelte-check --tsconfig ./tsconfig.json


====================================
Loading svelte-check in workspace: ./tmp-sveltekit-custom-event-types
Getting Svelte diagnostics...

./tmp-sveltekit-custom-event-types/src/routes/index.svelte:10:24
Error: Property 'gagagaga' does not exist on type '{ value: string; }'. (js)
	on:event2={(e) => {
		console.log(e.detail.gagagaga);
	}}


====================================
svelte-check found 1 error, 0 warnings, and 0 hints

System Info

System:
    OS: macOS 12.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 2.47 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.18.2 - ~/.nvm/versions/node/v14.18.2/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.3.0 - ~/.nvm/versions/node/v14.18.2/bin/npm
  Browsers:
    Chrome: 98.0.4758.80
    Safari: 15.2
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.17 
    @sveltejs/kit: next => 1.0.0-next.251 
    svelte: ^3.44.0 => 3.46.3

Severity

serious, but I can work around it

Additional Information

The work around is not using CustomEvent and providing callbacks like export let onEvent: () => void via the component so the typings are correct.

aliak00 avatar Feb 15 '22 11:02 aliak00