feat: add typed router link

Author: posva

packages/playground/src/router.ts

@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory, RouterView } from 'vue-router'
+import type { RouterLinkTyped } from 'vue-router'
 import Home from './views/Home.vue'
 import Nested from './views/Nested.vue'
 import NestedWithId from './views/NestedWithId.vue'
@@ -189,6 +190,12 @@ declare module 'vue-router' {
   }
 }
 
+declare module 'vue' {
+  interface GlobalComponents {
+    RouterLink: RouterLinkTyped<typeof router>
+  }
+}
+
 const delay = (t: number) => new Promise(resolve => setTimeout(resolve, t))
 
 // remove trailing slashes

packages/router/src/RouterLink.ts

@@ -31,26 +31,35 @@ import {
   VueUseOptions,
   RouteLocation,
   RouteLocationNormalized,
+  RouteLocationPathRaw,
+  RouteLocationString,
+  RouteLocationNamedRaw,
 } from './types'
 import { isSameRouteLocationParams, isSameRouteRecord } from './___location'
 import { routerKey, routeLocationKey } from './injectionSymbols'
 import { RouteRecord } from './matcher/types'
 import { NavigationFailure } from './errors'
 import { isArray, isBrowser, noop } from './utils'
+import type { Router } from './router'
+import { RouteNamedMap, RouteStaticPathMap } from './types/named'
 
-export interface RouterLinkOptions {
+export interface RouterLinkOptions<
+  Routes extends RouteLocationRaw = RouteLocationRaw
+> {
   /**
    * Route Location the link should navigate to when clicked on.
    */
-  to: RouteLocationRaw
+  to: Routes
   /**
    * Calls `router.replace` instead of `router.push`.
    */
   replace?: boolean
   // TODO: refactor using extra options allowed in router.push. Needs RFC
 }
 
-export interface RouterLinkProps extends RouterLinkOptions {
+export interface RouterLinkProps<
+  Routes extends RouteLocationRaw = RouteLocationRaw
+> extends RouterLinkOptions<Routes> {
   /**
    * Whether RouterLink should not wrap its content in an `a` tag. Useful when
    * using `v-slot` to create a custom RouterLink
@@ -251,12 +260,18 @@ export const RouterLinkImpl = /*#__PURE__*/ defineComponent({
 /**
  * Component to render a link that triggers a navigation on click.
  */
-export const RouterLink = RouterLinkImpl as unknown as {
+export const RouterLink = RouterLinkImpl as unknown as RouterLinkTyped
+
+export interface RouterLinkTyped<R extends Router = Router> {
   new (): {
     $props: AllowedComponentProps &
       ComponentCustomProps &
       VNodeProps &
-      RouterLinkProps
+      RouterLinkProps<
+        | RouteLocationNamedRaw<RouteNamedMap<R['options']['routes']>>
+        | RouteLocationString<RouteStaticPathMap<R['options']['routes']>>
+        | RouteLocationPathRaw<RouteStaticPathMap<R['options']['routes']>>
+      >
 
     $slots: {
       default: (arg: UnwrapRef<ReturnType<typeof useLink>>) => VNode[]

packages/router/src/index.ts

@@ -99,7 +99,11 @@ export {
   loadRouteLocation,
 } from './navigationGuards'
 export { RouterLink, useLink } from './RouterLink'
-export type { RouterLinkProps, UseLinkOptions } from './RouterLink'
+export type {
+  RouterLinkProps,
+  UseLinkOptions,
+  RouterLinkTyped,
+} from './RouterLink'
 export { RouterView } from './RouterView'
 export type { RouterViewProps } from './RouterView'