Svelte-check and VSCode extension errors regarding component types... How to declare them in Svelte 5?

[charlie-roosen]

Here is the way that I've been declaring components that I'm binding to a JavaScript reference via "bind:this":

<script lang="ts">
    import CloneWorkflowDialog from './dialogs/CloneWorkflowDialog.svelte';

   let cloneWorkflowDialog : CloneWorkflowDialog;   
</script>

<CloneWorkflowDialog bind:this={cloneWorkflowDialog}/>

With svelte-check 4.0.3, I'm getting new errors that are not flagged by 4.0.2:

c:\cr-bitbucket\RMP Platform Scala\w2e-svelte\svelteui\src\lib\components\workflow\WorkflowTitlePanel.svelte:102:30
Error: 'CloneWorkflowDialog' refers to a value, but is being used as a type here. Did you mean 'typeof CloneWorkflowDialog'? (ts)

   let cloneWorkflowDialog : CloneWorkflowDialog;

This is also being displayed as an error by "Svelte for VS Code" v109.0.2 and not by v108.6.1.

Is this a bug in the language tools, or has the idiom for declaring the types of components change?

[jrmajor]

It's probably related to #2517. I encountered a similar error and tried to add typeof, as suggested in the PR description, but got another error: Type 'SvelteComponent<$$ComponentProps, { [evt: string]: CustomEvent<any>; }, {}> & { $$bindings?: "" | undefined; } & { setPhotoUri: (uri: string, source: string) => void; }' is not assignable to type '__sveltets_2_IsomorphicComponent<$$ComponentProps, { [evt: string]: CustomEvent<any>; }, {}, { setPhotoUri: (uri: string, source: string) => void; }, "">'. In my case both components are using runes.

[wheeOs]

yep, I have the same issue. The VS Code extension complains, the check fails, but the app still runs and compiles

[wheeOs]

I did a rollback to v109.0.1 for now, and keep it so until this gets fixed

[dummdidumm]

This works correctly. In Svelte 5, components are functions. The types reflect that, so the default export is a function now. To type "I expect an instance of this function", you now do this:

<script lang="ts">
    import CloneWorkflowDialog from './dialogs/CloneWorkflowDialog.svelte';

-   let cloneWorkflowDialog : CloneWorkflowDialog;
+   let cloneWorkflowDialog : ReturnType<typeof CloneWorkflowDialog>;
</script>

<CloneWorkflowDialog bind:this={cloneWorkflowDialog}/>

[bdmackie]

@dummdidumm they've been functions for most of the RC. Is it necessary for it to be that verbose? Sorry if this sounds ranty but this already felt tedious/noisy, especially when triggered by not being able to reference 'this' component, and this makes it even more boilerplatey IMO. At least glad I saw this as I was pulling my hair out wondering why VS code caught on fire with red squiggles after a version bump.

Edit: I've read the related issue so have a vague idea that your hand was forced.... still if I can vote for some kind of ergonomics improvement for this requirement please... maybe even some compiler help?

P.S. I've been getting the 'non reactive state' warning and so to shush it I have been using syntax like this:

let editor1 = $state<Editor | null>(null);

So what you are saying is I need to do something like this:

let editor1 = $state<ReturnType<typeof Editor> | undefined>();

P.P.S. I even messed with Component<> types to try to match the component thinking that would be a cleaner way to do this, but I couldn't get a type definition that was assignable for the binding. I believe that is what the Component<> type is for? I suggest it's an anti-pattern to require the instance of an object to get its type.

Edit: struck out the point about using state as it's incorrect. The last point is what matters.