diff --git a/documentation/docs/02-template-syntax/01-component-fundamentals.md b/documentation/docs/02-template-syntax/01-component-fundamentals.md index 5e4d78e59a..debe4828d2 100644 --- a/documentation/docs/02-template-syntax/01-component-fundamentals.md +++ b/documentation/docs/02-template-syntax/01-component-fundamentals.md @@ -72,13 +72,31 @@ If you're using TypeScript, you can declare the prop types: ```svelte +``` + +If you're using JavaScript, you can declare the prop types using JSDoc: + +```svelte + ``` diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md index 879e39e5f0..5f0ee7c0ea 100644 --- a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md +++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md @@ -556,17 +556,22 @@ let props = $props(); If you're using TypeScript, you can declare the prop types: + ```ts -type MyProps = any; -// ---cut--- -let { a, b, c, ...everythingElse }: MyProps = $props(); +interface MyProps { + required: string; + optional?: number; + partOfEverythingElse?: boolean; +}; + +let { required, optional, ...everythingElse }: MyProps = $props(); ``` > In an earlier preview, `$props()` took a type argument. This caused bugs, since in a case like this... > > ```ts > // @errors: 2558 -> let { x = 42 } = $props<{ x: string }>(); +> let { x = 42 } = $props<{ x?: string }>(); > ``` > > ...TypeScript [widens the type](https://www.typescriptlang.org/play?#code/CYUwxgNghgTiAEAzArgOzAFwJYHtXwBIAHGHIgZwB4AVeAXnilQE8A+ACgEoAueagbgBQgiCAzwA3vAAe9eABYATPAC+c4qQqUp03uQwwsqAOaqOnIfCsB6a-AB6AfiA) of `x` to be `string | number`, instead of erroring.