Skip to content

Commit

Permalink
docs: note jsdoc syntax for declaring props (#11370)
Browse files Browse the repository at this point in the history
* docs: note jsdoc syntax for declaring props

closes #10541

* oops
  • Loading branch information
dummdidumm committed Apr 29, 2024
1 parent b3c2d97 commit 0cf10a3
Showing 1 changed file with 17 additions and 0 deletions.
17 changes: 17 additions & 0 deletions sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
Original file line number Diff line number Diff line change
Expand Up @@ -490,6 +490,23 @@ let { a, b, c, ...everythingElse }: MyProps = $props();
>
> ...TypeScript [widens the type](https://www.typescriptlang.org/play?#code/CYUwxgNghgTiAEAzArgOzAFwJYHtXwBIAHGHIgZwB4AVeAXnilQE8A+ACgEoAueagbgBQgiCAzwA3vAAe9eABYATPAC+c4qQqUp03uQwwsqAOaqOnIfCsB6a-AB6AfiA) of `x` to be `string | number`, instead of erroring.
If you're using JavaScript, you can declare the prop types using JSDoc:

```js
/** @type {{ x: string }} */
let { x } = $props();

// or use @typedef if you want to document the properties:

/**
* @typedef {Object} MyProps
* @property {string} y Some documentation
*/

/** @type {MyProps} */
let { y } = $props();
```

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).

### What this replaces
Expand Down

0 comments on commit 0cf10a3

Please sign in to comment.