]> git.ipfire.org Git - thirdparty/vuejs/router.git/commitdiff
types: typed routes for RouterLink
authorEduardo San Martin Morote <posva13@gmail.com>
Thu, 16 Jun 2022 08:37:50 +0000 (10:37 +0200)
committerEduardo San Martin Morote <posva@users.noreply.github.com>
Thu, 30 Jun 2022 07:59:00 +0000 (09:59 +0200)
packages/router/src/RouterLink.ts
packages/router/src/globalExtensions.ts
packages/router/test-dts/components.test-d.tsx

index b82f75e26b23978d736aace00e9a5fd4dfad2f1c..586a478b0b2763b251c718201001e3de2d845e55 100644 (file)
@@ -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 &
index 771d2e0ded24c3270f7c496e61cc471c75cb04bb..878ec323ca514e1c20a27f14d474f2131206b8d0 100644 (file)
@@ -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>
   }
 }
index 6b970012fc6e73080984992f0430c769eab27707..7cde4d898720a49eddfa0035bf0cd39b08906b94 100644 (file)
@@ -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" />)