PaulMaly / svelte-imask

IMask input component and action for Svelte 3
64 stars 1 forks source link

[FEATURE REQUEST] TypeScript support #9

Open silvioprog opened 3 years ago

silvioprog commented 3 years ago

Hi.

After installing svelte-imask, I have been trying to use it as following (plus official TypeScript support):

<script lang="ts">
  import MaskedInput from "svelte-imask/src/MaskedInput.svelte";

  class Order {
    document?: string;
  }

  let order = new Order();
</script>

<MaskedInput bind:value={order.document} options={{ mask: '00000', lazy: false }} />

it works, but it emits the following warning at run time:

(JSX attribute) value?: undefined
Type 'string | undefined' is not assignable to type 'undefined'.
  Type 'string' is not assignable to type 'undefined'. ts(2322)

To temporary solve the problem, I just changed the line 21 from export let value; to export let value = '';, but a official TypeScript could be very welcome. 🙂

Thank you!

nosovk commented 2 years ago

In global.d.ts add

declare namespace svelte.JSX {
  interface SvelteInputProps<T> {
    oncomplete: ({ detail: any }) => void;
    onaccept: ({ detail: any }) => void;
  }
}
PaulMaly commented 2 years ago

@silvioprog Hi! Thanks for your comment. Yea, now you can use TS in your projects on Svelte/Sapper/SvelteKit, but as you already know, not all packages define their typings. And, unfortunately, this package doesn't provide support for TS.

I believe you need to try an official package for iMask from its author. It works almost the same way as this one and is mainly based on it, but maintained by iMask contributors.

Please, check it out: https://github.com/uNmAnNeR/imaskjs/tree/master/packages/svelte-imask