types: typed routes for RouterLink

Author: posva

packages/router/src/RouterLink.ts

@@ -41,7 +41,8 @@ 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'
+import type { RouteNamedMap, RouteStaticPathMap } from './types/named'
+import type { RouterTyped } from './typedRouter'
 
 export interface RouterLinkOptions<
   Routes extends RouteLocationRaw = RouteLocationRaw
@@ -262,7 +263,11 @@ export const RouterLinkImpl = /*#__PURE__*/ defineComponent({
  */
 export const RouterLink = RouterLinkImpl as unknown as RouterLinkTyped
 
-export interface RouterLinkTyped<R extends Router = Router> {
+/**
+ * Typed version of the `RouterLink` component. Its generic defaults to the typed router so it can be inferred
+ * automatically for JSX.
+ */
+export interface RouterLinkTyped<R extends Router = RouterTyped> {
   new (): {
     $props: AllowedComponentProps &
       ComponentCustomProps &

packages/router/src/globalExtensions.ts

@@ -1,11 +1,11 @@
-import {
+import type {
   NavigationGuardWithThis,
   NavigationGuard,
   RouteLocationNormalizedLoaded,
 } from './types'
 import { RouterView } from './RouterView'
-import { RouterLink } from './RouterLink'
-import { RouterTyped } from './typedRouter'
+import type { RouterLinkTyped } from './RouterLink'
+import type { RouterTyped } from './typedRouter'
 
 declare module '@vue/runtime-core' {
   export interface ComponentCustomOptions {
@@ -60,6 +60,6 @@ declare module '@vue/runtime-core' {
 
   export interface GlobalComponents {
     RouterView: typeof RouterView
-    RouterLink: typeof RouterLink
+    RouterLink: RouterLinkTyped<RouterTyped>
   }
 }

packages/router/test-dts/components.test-d.tsx

@@ -13,17 +13,19 @@ let router = createRouter({
 })
 
 // RouterLink
-// @ts-expect-error
+// @ts-expect-error missing to
 expectError(<RouterLink />)
-// @ts-expect-error
+// @ts-expect-error: invalid prop
 expectError(<RouterLink to="/" custom="text" />)
-// @ts-expect-error
+// @ts-expect-error: invalid prop
 expectError(<RouterLink to="/" replace="text" />)
 expectType<JSX.Element>(<RouterLink to="/foo" replace />)
 expectType<JSX.Element>(<RouterLink to="/foo" />)
 expectType<JSX.Element>(<RouterLink class="link" to="/foo" />)
 expectType<JSX.Element>(<RouterLink to={{ path: '/foo' }} />)
 expectType<JSX.Element>(<RouterLink to={{ path: '/foo' }} custom />)
+// @ts-expect-error: non existing name
+expectType<JSX.Element>(<RouterLink to={{ name: 'nope' }} custom />)
 
 // RouterView
 expectType<JSX.Element>(<RouterView class="view" />)