Typescript issue with union types affecting RouteNamedMap

[joris-gallot]

I'm opening a discussion about a Typescript issue Limit of 25 members when using union of mapped type, this limitation poses a problem for projects with a large number of routes, making it difficult to leverage the type safety and autocompletion benefits provided by the plugin

Problem:

When defining a RouteNamedMap with more than 25 routes, Typescript fails to validate the code due to this limitation. For instance, consider the following example:

interface RouteNamedMap {
    Home: RouteRecordInfo<'Home', '/'>;
    // ... 25 other routes
}

const router = useRouter()
const myRouteName = 'Home' as keyof RouteNamedMap;
router.push({ name: myRouteName }); // Argument of type '{ name: keyof RouteNamedMap; }' is not assignable to parameter of type...

With more than 25 routes in the RouteNamedMap, Typescript cannot handle the union type correctly, resulting in a type-checking error, does anyone have an idea or has already found a solution to this problem?

[posva]

This is weird, I haven’t faced this error with larger amount of routes. Is it maybe specific to the way the route name is declared in this example?

[joris-gallot]

I created a repository to reproduce the error: https://github.com/joris-gallot/vue-router-typed-issue-large-union-types
The error is in App.vue, if you comment out some of the routes in typed-router.d.ts, the error disappears, could the route names present in the example be causing the issue?

[posva]

I think the problem comes from the as keyof, which isn’t needed in the example, or rather should be replaced with as const if needed

[joris-gallot]

Yes that's exactly the problem, I updated the repository with a more illustrative example to show that it can cause issues when trying to validate route names in an interface

<script setup lang="ts">
import { RouteNamedMap } from 'vue-router/auto-routes'

interface NavigationItem {
  name: keyof RouteNamedMap
  title: string
}

const navigationItems: NavigationItem[] = [
  { name: 'Foo1', title: 'Foo1' },
  { name: 'Foo2', title: 'Foo2' },
  { name: 'Foo3', title: 'Foo3' },
]

</script>

<template>
  <div v-for="{ title, name } in navigationItems">
	<!-- ts error: "Type '{ name: keyof RouteNamedMap; }' is not assignable to type..." -->
    <router-link :to="{name}">{{ title }}</router-link>
  </div>
</template>

I understand that there might not be a workaround to solve this issue, but it's quite inconvenient in certain cases

[posva]

Use satisfies instead of : NavigatinItem

[posva]

this is def worth adding to docs though