Skip to content

Commit 0cf10a3

Browse files
authored
docs: note jsdoc syntax for declaring props (#11370)
* docs: note jsdoc syntax for declaring props closes #10541 * oops
1 parent b3c2d97 commit 0cf10a3

File tree

1 file changed

+17
-0
lines changed
  • sites/svelte-5-preview/src/routes/docs/content/01-api

1 file changed

+17
-0
lines changed

sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -490,6 +490,23 @@ let { a, b, c, ...everythingElse }: MyProps = $props();
490490
>
491491
> ...TypeScript [widens the type](https://www.typescriptlang.org/play?#code/CYUwxgNghgTiAEAzArgOzAFwJYHtXwBIAHGHIgZwB4AVeAXnilQE8A+ACgEoAueagbgBQgiCAzwA3vAAe9eABYATPAC+c4qQqUp03uQwwsqAOaqOnIfCsB6a-AB6AfiA) of `x` to be `string | number`, instead of erroring.
492492
493+
If you're using JavaScript, you can declare the prop types using JSDoc:
494+
495+
```js
496+
/** @type {{ x: string }} */
497+
let { x } = $props();
498+
499+
// or use @typedef if you want to document the properties:
500+
501+
/**
502+
* @typedef {Object} MyProps
503+
* @property {string} y Some documentation
504+
*/
505+
506+
/** @type {MyProps} */
507+
let { y } = $props();
508+
```
509+
493510
By default props are treated as readonly, meaning reassignments will not propagate upwards and mutations will result in a warning at runtime in development mode. You will also get a runtime error when trying to `bind:` to a readonly prop in a parent component. To declare props as bindable, use [`$bindable()`](#$bindable).
494511

495512
### What this replaces

0 commit comments

Comments
 (0)