Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

I want to get the event type of a svelte on:input event in typescript but I can't find it

$
0
0

I have an input in svelte

<input    {type}    {placeholder}    on:input={(e) => emitChange(e)}    class="pl-2 w-full h-full bg-sand border border-midnight dark:bg-midnight"  />

That goes into this function

  function emitChange(event: any) {    const text = event.target.value    dispatch("changeContent", {      text,    })  }

I want to get rid of the any and replace it with the correct InputEvent which I can see it is using console logs. but how do I find InputEvent from svelte?

import { createEventDispatcher, InputEvent } from "svelte" fails with Module '"svelte"' has no exported member 'InputEvent'

I tried:

  function emitChange(event: InputEvent) {    console.log(event, "13rm")    const text = event.target.value // fails here  }

that gives Property 'value' does not exist on type 'EventTarget' even though when i console log event i see:

InputEvent {isTrusted: true, data: 'a', isComposing: false, inputType: 'insertText', dataTransfer: null, …}isTrusted: truebubbles: truecancelBubble: falsecancelable: falsecomposed: truecurrentTarget: nulldata: "a"dataTransfer: nulldefaultPrevented: falsedetail: 0eventPhase: 0inputType: "insertText"isComposing: falsereturnValue: truesourceCapabilities: nullsrcElement: input.pl-2.w-full.h-full.bg-sand.border.border-midnight.dark:bg-midnighttarget: input.pl-2.w-full.h-full.bg-sand.border.border-midnight.dark:bg-midnighttimeStamp: 1324.199999988079type: "input"view: nullwhich: 0[[Prototype]]: InputEvent '13rm'

and when I click to open the object I see a target property with a value. like this:

target: {    // ...    value: "a"}

so I must have the wrong type.

Edit, this "works" to get the event type but I still have the awful any:

  function emitChange(event: any) {    console.log(event, "13rm")    const { value } = event.target as HTMLInputElement // improvement    const text = value  }

Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>