Svelte custom event on svelte typescript

Question

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

hackape · Accepted Answer · 2022-01-14 15:19:19Z

34

According to the doc, you can create a .d.ts file in your project somewhere. And put inside that file the following:

declare namespace svelte.JSX {
  interface HTMLAttributes<T> {
    onclick_outside: () => void
  }
}

Please read the doc for more detail.

edited Jan 14, 2022 at 15:19

answered Sep 30, 2020 at 6:12

hackape

20.3k2 gold badges34 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

KawishBit Over a year ago

Works perfectly!, i just need to change it to interface HTMLProps, thanks for the help and the advice man, i'm aware that svelte typescript is still new, but unfortunately i'm not the one making the decision atm, but i'll make sure to remember your words

dummdidumm Over a year ago

To hackape: I know this is a little off topic, but could you share some of the other inconveniences you experienced while using Svelte with TS? I'm one of the maintainers in that area and feedback like this is really valuable (because it's rare).

hackape Over a year ago

@dummdidumm I know bridging the two is not easy, so kudos to the work! But sorry I don’t have much to share cus it was more than half a year ago and I don’t remember much about specific things. I can only remember the general impression about the experience was acceptable, but not totally satisfying. At the end of day I thought to myself better just keep the TS things in .ts file as much as possible and import into .svelte file to lessen the melange and ignore warnings. Later on I switch back to the comfort world of react 😅

hackape Over a year ago

I was trying to port the svelte repl into vscode extension, but got interrupted then dropped it halfway. I can find time to dust off and refresh my memory. If I have anything worth sharing I’ll get back to you.

hackape Over a year ago

Ah okay. I want the preview feature too. Are you maintainer of the vscode extension?

|

Jonathan · Accepted Answer · 2023-07-23 20:33:36Z

18

Update 7/23/23

New SvelteKit requires this:

Here is my src/app.d.ts file.

// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
    namespace App {
        // interface Error {}
        // interface Locals {}
        // interface PageData {}
        // interface Platform {}
    }

    declare namespace svelteHTML {
        interface HTMLAttributes<T> {
            'on:clickOutside'?: CompositionEventHandler<T>;
        }
    }
}

export { };

J

edited Jul 23, 2023 at 20:33

answered Jan 30, 2023 at 3:00

Jonathan

4,1358 gold badges54 silver badges90 bronze badges

3 Comments

Coo Over a year ago

For those looking at this answer: A gotcha in this new format is that the property includes the colon : in the property name. So on:clickOutside instead of onclickOutside

Jonathan Over a year ago

My custom event and class is called clickOutside, so it works for me.

Ashwani Bhardwaj Over a year ago

worked perfectly @sveltejs/kit": "^2.0.0",

oae · Accepted Answer · 2021-02-19 09:52:12Z

16

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;
    }
}

answered Feb 19, 2021 at 9:52

oae

1,6521 gold badge18 silver badges26 bronze badges

1 Comment

poliskalien Over a year ago

That's the only one actually working, should be marked as answer

Tomasz · Accepted Answer · 2020-10-13 09:23:12Z

16

This declaration worked for me

declare namespace svelte.JSX {
  interface DOMAttributes<T> {
    onclick_outside?: CompositionEventHandler<T>;
  }
}

Don't forget to specify the location of your custom type declarations in tsconfig.json

answered Oct 13, 2020 at 9:23

Tomasz

7173 silver badges9 bronze badges

2 Comments

Marcus Over a year ago

Where do you put this?

J.P. Over a year ago

@Marcus and future readers: SvelteKit comes with a app.d.ts inside the src folder. That's a fine location, also if you're using "plain" Svelte. In comparison, Angular used to generate a typings.d.ts in its src folder for the same purpose.

Teiem · Accepted Answer · 2022-12-04 16:44:09Z

7

For me the following worked:

declare namespace svelteHTML {
    interface HTMLAttributes<T> {
        "on:click_outside"?: CompositionEventHandler<T>;
    }
}

inside your src/app.d.ts.

based on this

answered Dec 4, 2022 at 16:44

Teiem

1,74121 silver badges47 bronze badges

Comments

melMass · Accepted Answer · 2024-01-30 13:15:16Z

1

You can now simply do

const dispatch = createEventDispatcher<{
    mounted: { id: string; store: FSStore }
    destroyed: { id: string }
  }>()

onMount(() => {
  dispatch('mounted', {
      id,
      store: fsStore,
  })
  return () => {
      dispatch('destroyed', {
        id,
      })
    }
})

This will then be fully typed:

<Explorer
  on:mounted={onExplorerMount}
  on:destroyed={onExplorerDestroy}
/>

ide preview

answered Jan 30, 2024 at 13:15

melMass

5,4763 gold badges38 silver badges32 bronze badges

Comments

Rodrigo D'Agostino · Accepted Answer · 2024-08-18 15:12:12Z

1

The solution provided by Jonathan did the trick for me, but I found a little improvement that will provide autocomplete for the event.details if you need it:

// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
    namespace App {
        // interface Error {}
        // interface Locals {}
        // interface PageData {}
        // interface PageState {}
        // interface Platform {}
    }

    declare namespace svelteHTML {
        interface HTMLAttributes {
            'on:remove'?: (event: CustomEvent<{ itemId: string }>) => void;
        }
    }
}

export {};

And here’s the official documentation for reference.

edited Aug 18, 2024 at 15:12

answered Jul 27, 2024 at 21:17

Rodrigo D'Agostino

9487 silver badges25 bronze badges

Collectives™ on Stack Overflow

Svelte custom event on svelte typescript

7 Answers 7

6 Comments

3 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

6 Comments

3 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related