typescript bindings for Svelte?

[smblee]

Hey - would appreciate having typescript bindings for Svelte.

Also how does this package differ from: https://github.com/PaulMaly/svelte-imask

[uNmAnNeR]

@smblee
hey!

would appreciate having typescript bindings for Svelte.

yep me too ;)

Also how does this package differ from: https://github.com/PaulMaly/svelte-imask

i don't remember actually. Several years ago I asked author to made some changes to improve integration with imask core but he has different opinion so i decided to create own package. It's just useful to have all in one place to in sync. Furthermore you can check sources which is quite small for more info.

[queenkjuul]

idk if this helps, but in case it's useful, here is how I got typescript playing nice with svelte-imask:

my app has a src/global.d.ts file which is in the path as specified in tsconfig.json (e.g. "inlcude": ["src/**/*.d.ts"]):

declare namespace svelte.JSX {
  interface SvelteInputProps {
    onaccept?: (event: any) => any
    oncomplete?: (event: any) => any
  }
}

Not sure if there's additional bindings necessary, but this worked for me. I'm also not familiar enough with the packaging to submit a PR as I'm not sure where or how to define the types within the package, would if I could though.

[fev4]

For anyone looking for this, the latest way to make this work is:

// app.d.ts
// first import the types for the form element you want to customize

import {
  HTMLInputAttributes,
  HTMLTextareaAttributes,
} from 'svelte/elements';

//...

declare module 'svelte/elements' {
  export interface HTMLInputAttributes {
    'on:accept'?: (event: any) => any;
  }
  export interface HTMLTextareaAttributes {
    'on:accept'?: (event: any) => any;
  }
}

// this is needed to not overwrite the types
export {};

Docs link.

[VityaSchel]

What about svelte 5?