fix: migrating rest props type includes props types (#13632)

* fix: rest props type includes props types

* chore: remove extra line

* Update .changeset/spotty-kings-hug.md

.changeset/spotty-kings-hug.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: migrating rest props type includes props types

packages/svelte/src/compiler/migrate/index.js

@@ -198,26 +198,26 @@ export function migrate(source, { filename } = {}) {
 				const type_name = state.scope.root.unique('Props').name;
 				let type = '';
 				if (uses_ts) {
-					if (analysis.uses_props || analysis.uses_rest_props) {
-						type = `interface ${type_name} { [key: string]: any }`;
-					} else {
 					type = `interface ${type_name} {${newline_separator}${state.props
 						.map((prop) => {
 							const comment = prop.comment ? `${prop.comment}${newline_separator}` : '';
 							return `${comment}${prop.exported}${prop.optional ? '?' : ''}: ${prop.type};`;
 						})
-							.join(newline_separator)}\n${indent}}`;
+						.join(newline_separator)}`;
-					}
-				} else {
 					if (analysis.uses_props || analysis.uses_rest_props) {
-						type = `Record<string, any>`;
+						type += `${state.props.length > 0 ? newline_separator : ''}[key: string]: any`;
+					}
+					type += `\n${indent}}`;
 				} else {
 					type = `{${state.props
 						.map((prop) => {
 							return `${prop.exported}${prop.optional ? '?' : ''}: ${prop.type}`;
 						})
-							.join(`, `)}}`;
+						.join(`, `)}`;
+					if (analysis.uses_props || analysis.uses_rest_props) {
+						type += `${state.props.length > 0 ? ', ' : ''}[key: string]: any`;
 					}
+					type += '}';
 				}
 
 				let props_declaration = `let {${props_separator}${props}${has_many_props ? `\n${indent}` : ' '}}`;

packages/svelte/tests/migrate/samples/props-rest-props-ts/input.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    export let foo: string;
+</script>
+
+<button {foo} {...$$restProps}>click me</button>

packages/svelte/tests/migrate/samples/props-rest-props-ts/output.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    interface Props {
+        foo: string;
+        [key: string]: any
+    }
+
+    let { foo, ...rest }: Props = $props();
+</script>
+
+<button {foo} {...rest}>click me</button>

packages/svelte/tests/migrate/samples/props-rest-props/output.svelte

@@ -1,5 +1,5 @@
 <script>
-    /** @type {Record<string, any>} */
+    /** @type {{foo: any, [key: string]: any}} */
     let { foo, ...rest } = $props();
 </script>
 

packages/svelte/tests/migrate/samples/slots-with-$$props/output.svelte

@@ -1,5 +1,5 @@
 <script>
-	/** @type {Record<string, any>} */
+	/** @type {{children?: import('svelte').Snippet, foo_1?: import('svelte').Snippet<[any]>, bar?: import('svelte').Snippet, dashed_name?: import('svelte').Snippet, [key: string]: any}} */
 	let {
 		...props
 	} = $props();

packages/svelte/tests/migrate/samples/svelte-component/output.svelte

@@ -1,5 +1,5 @@
 <script>
-	/** @type {Record<string, any>} */
+	/** @type {{[key: string]: any}} */
 	let { ...rest } = $props();
 	let Component;
 	let fallback;

packages/svelte/tests/migrate/samples/svelte-self-name-conflict/output.svelte

@@ -1,6 +1,6 @@
 <script>
 	import Output_1 from './output.svelte';
-	/** @type {Record<string, any>} */
+	/** @type {{[key: string]: any}} */
 	let { ...props } = $props();
 	let Output;
 </script>

packages/svelte/tests/migrate/samples/svelte-self/output.svelte

@@ -1,6 +1,6 @@
 <script>
 	import Output from './output.svelte';
-	/** @type {Record<string, any>} */
+	/** @type {{[key: string]: any}} */
 	let { ...props } = $props();
 </script>