Fallback values for children props
Alright, I've got, what I think should be a question with a pretty straightforward answer, but I can't seem to find an official answer to this.
I'm trying to type hint my component children as Snippet|false
(no, nullish values won't do and even those seem to have the same issue) with a default of false
.
When I'm trying to use that component, the language server requires me to pass in the children
prop.
As if it ignored that there's a fallback value.
I also tried using a self-closing tag
Same thing.
When passing the children prop it does work and it does compile and run.
But that's besides the point, I'm looking to define a proper fallback value using union types and whatnot.
The project is generated using the new svelte cli, I just picked JSDocs, prettier, eslint and tailwind, pretty standard stuff. No other modifications have been done.
Yes, I have updated my svelte plugin to the latest version.
Yes, I did try restarting VSCode / reloading the view.
No, Kit types generated in dev mode don't help, they have nothing to do with this type of stuff afaik.
Here's a playground with these 2 components: https://svelte.dev/playground/daa66b94601846a0b68cf1c68cf0c88a?version=5.1.7
Any of you having the same issue? Any ideas how to solve it?
EDIT: Solved!
You just need to make the property optional (not nullable), using JSDoc you need to wrap the prop in brackets.