Question

171

Svelte custom event on svelte typescript

rated 0 times [ 178] [ 7] / answers: 1 / hits: 7458 / 4 Years ago, wed, september 30, 2020, 12:00:00

I'm using clickOutside directive on my svelte-typescript project and I'm getting this error when I assign custom event to the related element

Type '{ class: string; onclick_outside: () => boolean; }' is not assignable to type 'HTMLProps<HTMLDivElement>'.

  Property 'onclick_outside' does not exist on type 'HTMLProps<HTMLDivElement>'

here's a snippet of my code

{#if profileToolbar}

<div

    transition:fly={{ y: -20, duration: 300 }}

    use:clickOutside={profileToolbarContainer}

    on:click_outside={() => (profileToolbar = !profileToolbar)}

    class="origin-top-right absolute right-0 mt-2 w-48 rounded-md

    shadow-lg z-10 shadow-md">

this is the clickOutside directive that I'm using currently https://svelte.dev/repl/0ace7a508bd843b798ae599940a91783?version=3.16.7

I'm new to typescript so I don't really know where to start with my google search, anyone knows how to tackle this issue? thanks for your help

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

whitney

Add To Favorites

Follow

Total Points: 642

Total Questions: 110

Total Answers: 98

Location: Solomon Islands

Member since Mon, Jun 20, 2022

2 Years ago

whitney questions

1 Jest - encountered an unexpected token when using transform property

Sat, Feb 5, 22, 00:00, 2 Years ago

1 Cannot read property 'importKey' of undefined, Web Crypto API without ssl

Thu, Jul 22, 21, 00:00, 3 Years ago

1 error TS7052: Element implicitly has an 'any' type because type 'AbstractControl' has no index signature. Did you mean to call 'get'?

Tue, Dec 8, 20, 00:00, 4 Years ago

1 React native - z-index in dropdown doesnt work

Tue, Jul 14, 20, 00:00, 4 Years ago

1 History.push doesn't work when redirecting to the same pathname but with different route param

Tue, Jun 16, 20, 00:00, 4 Years ago

View All

answered 4 Years ago brendaw · Accepted Answer

Ok, so existing answers did work only partly for me. Given that the clickOutside action fires a custom event named click_outside i arrive at following solution:

declare namespace svelte.JSX {

    interface HTMLProps<T> {

        onclick_outside?: (e: CustomEvent) => void;

    }

}