$route.params or $typedRoute.params unknown type is problematic

[Bobakanoosh]

Describe the bug
I'm trying to do the following with a nested dynamic route like /:username/:profileId:

<NuxtLink :to={ name: $routeNames.profile, params: $typedRoute.params  }>
   ....
</NuxtLink

But $typedRoute.params's default type is unknown. params then complains with:

Type 'unknown' is not assignable to type '{ username: string | number; profileId: string | number; }'.

Expected behavior
It would be nice if the type inferred based on the name I gave (like how the params already does that). At a minimum, it would be nice if it was any so I could pass it without having to coalesce the type.

Screenshots
N/A

Environnement infos

- Operating System: Windows_NT
- Node Version:     v18.12.1
- Nuxt Version:     3.8.1
- CLI Version:      3.9.1
- Nitro Version:    2.7.2
- Package Manager:  pnpm@8.9.0
- Builder:          -
- User Config:      devtools, modules, imports, vue, routeRules, css, googleFonts, sourcemap, nitro
- Runtime Modules:  @pinia/nuxt@0.5.1, nuxt-typed-router@3.3.3, @vueuse/nuxt@10.6.0, @unocss/nuxt@0.57.3, radix-vue/nuxt, nuxt-icon@0.6.5, @nuxtjs/google-fonts@3.0.2, @nuxt/image@1.0.0
- Build Modules:    -

Your pages folder structure

Run npx tree-node-cli {your page folder path}

pages
└── profiles
    ├── [username]
    │   └── [profileId]
    │       ├── index.vue
    ├── index.vue

Your nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
	devtools: {
		enabled: true,
		timeline: {
			enabled: true,
		},
	},
	modules: [
		["@pinia/nuxt", { autoImports: ["defineStore"] }],
		["nuxt-typed-router", { plugin: true }],
		"@vueuse/nuxt",
		"@unocss/nuxt",
		"radix-vue/nuxt",
		"nuxt-icon",
		"@nuxtjs/google-fonts",
		"@nuxt/image",
	],
	imports: {
		dirs: ["providers"],
	},
	vue: {
		defineModel: true,
	},
	css: ["@unocss/reset/tailwind.css"],
	googleFonts: {
		families: {
			Roboto: true,
		},
	},
	sourcemap: false,
	nitro: {
		preset: "cloudflare-pages",
	},
});

[victorgarciaesgi]

Yeah it's normal that's it's unknown, $typedRoute and typescript can't know which route you're at unless you do if ($typedRoute.name === "xxxx") before.
Solution would be to use useRoute like this.

const {params} = useRoute('xxxxx')
//             ^ typed

[Bobakanoosh]

What do you think about at least making it any instead of unknown? That way it can at least be passed.

[victorgarciaesgi]

The whole point of this module is to be typesafe, you can just use $route if you want any

[Bobakanoosh]

Unfortunately I get this warning:

Type 'RouteParams' is not assignable to type '{ username: string | number; profileId: string | number; }'.ts(2322)

with

:to="{ name: $routesNames.siegeUsernameProfileId, params: $route.params }" 

[victorgarciaesgi]

Then if you don't want type safety you can just add $route.params as any

[fanckush]

@victorgarciaesgi

Yeah it's normal that's it's unknown, $typedRoute and typescript can't know which route you're at unless you do if ($typedRoute.name === "xxxx") before. Solution would be to use useRoute like this.

const {params} = useRoute('xxxxx')
//             ^ typed

is doing the following inside the page products/[slug].vue without the the if check safe?

const route = useRoute('products-slug')

if it is, would there be a build-time way to figure out in which pages/.. useRoute is used and based on that automatically infer the route name?

I understand how this is impossible to determine at built time within other components but route components should work