typegen: generate params type for splat params (#12218)

Author: pcattori

integration/typegen-test.ts

@@ -111,4 +111,24 @@ test.describe("typegen", () => {
     expect(proc.stderr.toString()).toBe("");
     expect(proc.status).toBe(0);
   });
+
+  test("splat", async () => {
+    const cwd = await createProject({
+      "vite.config.ts": viteConfig,
+      "app/routes/splat.$.tsx": tsx`
+        import type { Route } from "./+types.splat.$"
+
+        function assertType<T>(t: T) {}
+
+        export function loader({ params }: Route.LoaderArgs) {
+          assertType<string>(params["*"])
+          return null
+        }
+      `,
+    });
+    const proc = typecheck(cwd);
+    expect(proc.stdout.toString()).toBe("");
+    expect(proc.stderr.toString()).toBe("");
+    expect(proc.status).toBe(0);
+  });
 });

packages/react-router-dev/typegen.ts

@@ -182,12 +182,12 @@ function formattedParamsProperties(
   const properties = Object.entries(params).map(([name, values]) => {
     if (values.length === 1) {
       const isOptional = values[0];
-      return indent + (isOptional ? `${name}?: string` : `${name}: string`);
+      return indent + (isOptional ? `"${name}"?: string` : `"${name}": string`);
     }
     const items = values.map((isOptional) =>
       isOptional ? "string | undefined" : "string"
     );
-    return indent + `${name}: [${items.join(", ")}]`;
+    return indent + `"${name}": [${items.join(", ")}]`;
   });
 
   // prettier-ignore
@@ -226,5 +226,8 @@ function parseParams(urlpath: string) {
       result[param].push(isOptional);
       return;
     });
+
+  const hasSplat = segments.at(-1) === "*";
+  if (hasSplat) result["*"] = [false];
   return result;
 }