Typing <svelte:component>'s "this" property in TypeScript

Question

I am building kind of a portal system in Svelte using a store to pass a component to display somewhere up the component tree.

My problem is not about implementing that system, it is about typing the store. I tried to declare it like so:

const modalComponent = writable<SvelteComponent>(null)

But this doesn't work. When I import a component somewhere, VS Code shows me a type of typeof <componentName>__SvelteComponent_, which is not compatible with the SvelteComponent type (which is actually an alias of SvelteComponentDev):

Type 'typeof <component>__SvelteComponent_' is missing the following properties from type 'SvelteComponentDev': $set, $on, $destroy, $capture_state, and 2 more.

How am I supposed to type this? I would like to avoid using any.

Update: here is a codesandbox of what would reproduce the case. Unfortunately, I can't seem to be able to get it to work with TypeScript. I'm still sharing it, hoping it can help.

Answer 1

As @dummdidumm instructed me, I created an issue here for the team at Svelte to fix that.

In the mean time I will mark this as the answer for now and will update it as soon as the issue is fixed and released. Thanks!