Comments (3)
I am not sure if this issue belongs in the language-tools repo.
I cannot get $props().children
to be typed, and it was raised over there.
<script>
// let children: unknown
let { children } = $props();
</script>
<!-- 'children' is of type 'unknown'.js(18046) -->
{@render children()}
from svelte.
To type the prop you need to type the props object and not individual props.
https://svelte-5-preview.vercel.app/docs/runes#$props
The unknown
part is generated by language-tools. But without that, it will still be inferred as any
. Not sure if it makes sense to allow it since it isn't how typescript inferred the type for destructuring.
from svelte.
So I guess there is no special return type for $bindable
? Is this good?
<script lang="ts">
type Props = { b: boolean };
let { b = $bindable<boolean>() }: Props = $props();
</script>
Wished this was documented in the $bindable
preview documentation.
I know TypeScript object must be typed as a whole, but still:
- If default values are provided, manual typing might not be necessary:
<script lang="ts">
let {
// Only this prop needs typing,
// but the whole Props should be typed.
showModal = $bindable<boolean>(),
closeWithBackdropClick = false,
onclose = (() => {}) as () => unknown
} = $props();
</script>
- props and the Props type can mismatch:
<!-- src/lib/Component.svelte -->
<script lang="ts">
// Even-though the fallback value has been provided,
let { b = $bindable(false) }: Props = $props();
// Since it is not a optional key in the Props type:
type Props = { b: boolean };
</script>
<!-- src/routes/+page.svelte -->
<script>
import Component from '$lib/Component.svelte';
</script>
<!-- Property 'b' is missing in type '{}' but required in type 'Props'. -->
<Component></Component>
from svelte.
Related Issues (20)
- Feature: Add bind:unchecked to input boxes of type "checkbox" HOT 7
- Svelte 5: Misleading/missing errors on non-existent sub-runes
- Svelte 5: Slot not render content for customElements HOT 11
- Svelte 4/5: Children/slot rerenders DOM when moved HOT 4
- Svelte 5: `{null}` is rendered in an edge case
- Svelte 5: $state declared with var in *.svelte.js broken HOT 2
- Properties are not reactive when using `mount`and `$state` props. HOT 6
- Runes mode: cannot send data from child to parent HOT 2
- [runes] Add the ability to get a list of dependencies
- Disallow prop interpolation + other stuff without quotes? HOT 5
- don't appear the result HOT 3
- Hydration regression between 224 and 225 HOT 6
- Support Composability on Runes HOT 13
- Svelte 5: binding to universal reactivity objects HOT 3
- Custom root folder destroys hmr css update (svelte + vite + ubuntu) HOT 2
- Error on invalid tag names
- webcomponents regression after 221 HOT 1
- Svelte 5: `$state.link` various bugs HOT 5
- Shadowed variable breaks `{#await}` block HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte.