How do I fix Type error in VSCode with Bindable props.

[nevil2]

If I have a component with a bindable prop value: string | number | undefined and use this component and give it a value: string as follows:

<component bind:value />

This was OK until recently, but now I get Typescript error in VS code as string | number | undefined cannot be bound to a string.

I can fix this by with:

<component bind:value={value as string} />

But this is long-winded, is bad practise (type casting) and need to be done 1000's of times.

Is there any other solution?

[brunnerh]

What I find surprising is that value as string does anything - value is already a string.

Tried to collapse the type using generics, but that apparently does not work either 🤔

<script lang="ts" generics="T extends string | number">
	let { value = $bindable() }: {
		value?: T;
	} = $props();
</script>

[nevil2]

I see that the issue is caused by Svelte for VS Code, feat: better type checking for bindings in Svelte 5 #2477, merged 2 weeks ago.

sveltejs/language-tools#2477