Svelteで、ライブラリのPropsを自作コンポーネントのPropsに指定して型をつける方法

Svelteで、ライブラリ独自コンポーネントでラップして使う時、ライブラリのpropsをそのまま使いたいときのメモ。

独自コンポーネントInputPrimary.svelteで、下記のようなflowbite-sveteを使ったコンポーネントを作りたい場合、

<script lang="ts">
    import { Input } from 'flowbite-svelte';
</script>

<Input {...$$props} />

「InputPrimary.svelte.d.ts」といファイルを作り、SvelteComponentTypedを使って型を定義する。

import { InputProps, InputEvents, InputSlots } from 'flowbite-svelte/dist/forms/Input.svelte.d.ts';
import { SvelteComponentTyped } from 'svelte';

export default class InputPrimary extends SvelteComponentTyped<
    InputProps,
    InputEvents,
    InputSlots
> {}

これで、InputPrimaryコンポーネントを使う時、vscodeがサジェストしてくれるようになる。

ただし、on:clickなどは、サジェストで出るが、InputPrimaryコンポーネントで、{…$$props}としても展開されないので、その都度Inputコンポーネント内にon:clickの処理を書かなければならないめんどくささが残る。

.d.tsファイルが増えるのも不満。