Svelte (svelte-kit) type custom action event with typescript

user_8618649 0
Viewed 145

i'm using clickOutside action bellow.

export function clickOutside(node: HTMLElement) {
 function detect({ target }: MouseEvent) {
   if (!node.contains(target as Node)) {
     node.dispatchEvent(new CustomEvent('clickoutside'));
    }
  }
   document.addEventListener('click', detect, { passive: true, capture: true });
   return {
     destroy() {
       document.removeEventListener('click', detect);
    },
  };

This is the error that i still get, when i hover over on:clickoutside={() => {}}

Type '{ onclickoutside: () => void; class: string; }' is not assignable to type 'HTMLProps<HTMLDivElement>'.
  Property 'onclickoutside' does not exist on type 'HTMLProps<HTMLDivElement>'}

I tried this in svelte kit app.d.ts

declare namespace svelte.JSX {
  interface HTMLAttributes<T> {
    clickoutside?: (event: CustomEvent) => void;
  }
}

i tried also HTMLProps<T> and HTMLProps<HTMLDivElement> and many other variations and nothing works. I restarted ts server 25 times so it's not that. this is the link for docs

And no, this is not a duplicate because i literally went through all the other answers and they don't work. like this one: example

sveltekit svelte typescript
1 Answers

The types are outdated, the correct current declaration seems to be:

declare namespace svelte.JSX {
    interface HTMLProps<T> {
        onclickoutside?: (event: CustomEvent) => void;
    }
}

(The error actually states as much.)

user_5467300
Related