From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Thu, 16 Jun 2022 08:37:50 +0000 (+0200)
Subject: types: typed routes for RouterLink
X-Git-Tag: v4.1.0~13
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=f2b2ef67a79c46bf3acd685048435d88fd5d62a5;p=thirdparty%2Fvuejs%2Frouter.git

types: typed routes for RouterLink
---

diff --git a/packages/router/src/RouterLink.ts b/packages/router/src/RouterLink.ts
index b82f75e2..586a478b 100644
--- a/packages/router/src/RouterLink.ts
+++ b/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 &
diff --git a/packages/router/src/globalExtensions.ts b/packages/router/src/globalExtensions.ts
index 771d2e0d..878ec323 100644
--- a/packages/router/src/globalExtensions.ts
+++ b/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>
   }
 }
diff --git a/packages/router/test-dts/components.test-d.tsx b/packages/router/test-dts/components.test-d.tsx
index 6b970012..7cde4d89 100644
--- a/packages/router/test-dts/components.test-d.tsx
+++ b/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" />)