docs: fine-tune $props types info (#12534)

Show how to do optional props, add jsdoc example to non-preview-docs

closes #12528

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
 <script lang="ts">
 	interface Props {
-		a: number;
-		b: boolean;
-		c: string;
+		required: string;
+		optional?: number;
 		[key: string]: unknown;
 	}
 
-	let { a, b, c, ...everythingElse }: Props = $props();
+	let { required, optional, ...everythingElse }: Props = $props();
+</script>
+```
+
+If you're using JavaScript, you can declare the prop types using JSDoc:
+
+```svelte
+<script>
+	/** @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();
 </script>
 ```
 

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:
 
+<!-- prettier-ignore -->
 ```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.