Seems to be false positives when using Sveltekit with Svelte 5 and Typescript

I am building a Sveltekit project using Svelte 5 and Typescript.

I have a simple Avatar component, which I define like so: 

<script lang="ts">
    interface AvatarProps {
        image?: string;
        name?: string;
        number?: number | null;
        stacked?: boolean;
        size?: 'small' | 'medium' | 'large' | 'xlarge';
    }

    let {
        image,
        name = 'profile image',
        number = null,
        stacked = false,
        size = 'medium'
    } = $props<AvatarProps>();
</script>

Webstorm marks <AvatarProps> as an error and says ‘Svelte: Expected 0 type arguments, but got 1’. 

But the component works fine both in Storybook and in the project itself. And it is type safe, it gives the right errors if a wrong type is being used, so this seems to be a false positive by Webstorm. 

I also asked both Claude.AI and ChatGPT, and both seem to think the code is correct and the problem must be with Webstorm. 

Or am I missing something? 

0

The error comes from the Svelte language service. I get the same error when running svelte-check:

 

If you believe that this is a false positive, please submit a ticket to https://github.com/sveltejs/language-tools/issues.

0

The correct way to type your props is no longer with

let { ... } = $props<Type>()

but with

let { ... } : Type = $props()

See this issue for more information: https://github.com/sveltejs/svelte/issues/10812

2

Matei Trand yeah, I figured it out eventually. Forgot this post was even here. 

The error message is seriously unclear. 

0

请先登录再写评论。