feat: typing global router

diff --git a/playground/router.ts b/playground/router.ts
index 45860e8629766fea5c1947dda2a56694081f15f4..6a9ccadf3dc5f6a3ef7282a035cb0564c117ca43 100644 (file)
--- a/playground/router.ts
+++ b/playground/router.ts
@@ -161,7 +161,7 @@ export const router = createRouter({
         { path: 'settings', component },
       ],
     },
-  ],
+  ] as const,
   async scrollBehavior(to, from, savedPosition) {
     await scrollWaiter.wait()
     if (savedPosition) {
@@ -176,6 +176,12 @@ export const router = createRouter({
   },
 })
 
+declare module '../src' {
+  export interface Config {
+    Router: typeof router
+  }
+}
+
 const delay = (t: number) => new Promise(resolve => setTimeout(resolve, t))
 
 // remove trailing slashes

diff --git a/playground/tsconfig.json b/playground/tsconfig.json
index a6d5b8b91e08e91fe3b2ad759a96d48cd649a6c1..7428cbbbaa7e6493cba85dbc7349ebea54f941db 100644 (file)
--- a/playground/tsconfig.json
+++ b/playground/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "include": ["*.ts", "api", "../src/global.d.ts", "shim.d.ts"],
+  "include": ["./**/*.ts", "api", "../src/global.d.ts", "shim.d.ts"],
   "compilerOptions": {
     "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
     "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,

diff --git a/src/RouterLink.ts b/src/RouterLink.ts
index 68c6dabb71f89ea8b82dd2c6dde030074e588e49..79bad41619afae6b9a10702023cf96dd1cd30971 100644 (file)
--- a/src/RouterLink.ts
+++ b/src/RouterLink.ts
@@ -37,12 +37,13 @@ import { routerKey, routeLocationKey } from './injectionSymbols'
 import { RouteRecord } from './matcher/types'
 import { NavigationFailure } from './errors'
 import { isBrowser, noop } from './utils'
+import { RouterTyped } from './typedRouter'
 
 export interface RouterLinkOptions {
   /**
    * Route Location the link should navigate to when clicked on.
    */
-  to: RouteLocationRaw
+  to: Parameters<RouterTyped['push']>[0]
   /**
    * Calls `router.replace` instead of `router.push`.
    */

diff --git a/src/globalExtensions.ts b/src/globalExtensions.ts
index afbd2097bf2660e2ed83134121c3a4e4b9dd7536..771d2e0ded24c3270f7c496e61cc471c75cb04bb 100644 (file)
--- a/src/globalExtensions.ts
+++ b/src/globalExtensions.ts
@@ -3,9 +3,9 @@ import {
   NavigationGuard,
   RouteLocationNormalizedLoaded,
 } from './types'
-import { Router } from './router'
 import { RouterView } from './RouterView'
 import { RouterLink } from './RouterLink'
+import { RouterTyped } from './typedRouter'
 
 declare module '@vue/runtime-core' {
   export interface ComponentCustomOptions {
@@ -55,7 +55,7 @@ declare module '@vue/runtime-core' {
     /**
      * {@link Router} instance used by the application.
      */
-    $router: Router
+    $router: RouterTyped
   }
 
   export interface GlobalComponents {

diff --git a/src/injectionSymbols.ts b/src/injectionSymbols.ts
index 4114db88103b47d5865cbdf25826e8a86df1ec30..e04ef294f945bfba59259f9aa670b584431c15d7 100644 (file)
--- a/src/injectionSymbols.ts
+++ b/src/injectionSymbols.ts
@@ -1,7 +1,7 @@
 import { InjectionKey, ComputedRef, Ref } from 'vue'
 import { RouteLocationNormalizedLoaded } from './types'
-import { Router } from './router'
 import { RouteRecordNormalized } from './matcher/types'
+import { RouterTyped } from './typedRouter'
 
 /**
  * RouteRecord being rendered by the closest ancestor Router View. Used for
@@ -30,7 +30,9 @@ export const viewDepthKey = Symbol(
  *
  * @internal
  */
-export const routerKey = Symbol(__DEV__ ? 'router' : '') as InjectionKey<Router>
+export const routerKey = Symbol(
+  __DEV__ ? 'router' : ''
+) as InjectionKey<RouterTyped>
 
 /**
  * Allows overriding the current route returned by `useRoute` in tests. rl

diff --git a/src/types/index.ts b/src/types/index.ts
index d0c48bf690073c3e1e8f919ff47a141231cc140b..268eecfccd6317c7ca74c3347af1b2537e53231b 100644 (file)
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -79,7 +79,7 @@ export interface LocationAsRelativeRaw<
 }
 
 // this one didn't work 🤔
-// export type _LocationAsRelativeRaw<
+// export type LocationAsRelativeRaw<
 //   RouteMap extends RouteNamedMapGeneric = RouteNamedMapGeneric
 // > = {
 //   [N in keyof RouteMap]: {

diff --git a/src/useApi.ts b/src/useApi.ts
index 9bf578539353b0f461ee6916d9b700877044ab5a..c62ed0c057665ac040a3b14d7065ca3bba97b28d 100644 (file)
--- a/src/useApi.ts
+++ b/src/useApi.ts
@@ -1,13 +1,13 @@
 import { inject } from 'vue'
 import { routerKey, routeLocationKey } from './injectionSymbols'
-import { Router } from './router'
+import { RouterTyped } from './typedRouter'
 import { RouteLocationNormalizedLoaded } from './types'
 
 /**
  * Returns the router instance. Equivalent to using `$router` inside
  * templates.
  */
-export function useRouter(): Router {
+export function useRouter(): RouterTyped {
   return inject(routerKey)!
 }
 

diff --git a/test-dts/namedRoutes.test-d.ts b/test-dts/namedRoutes.test-d.ts
index 128b2c8df4ced03d194b6fe2866bf9fbc29a5356..7a21c84b448f23ad95d0e72d203dee35e5a1f20a 100644 (file)
--- a/test-dts/namedRoutes.test-d.ts
+++ b/test-dts/namedRoutes.test-d.ts
@@ -7,6 +7,7 @@ import {
   RouterTyped,
   RouteLocationRaw,
   JoinPath,
+  useRouter,
 } from './index'
 import { DefineComponent } from 'vue'
 
@@ -82,11 +83,16 @@ for (const method of methods) {
   r2[method]({ params: { a: 2 } })
   r2[method]({ params: {} })
   r2[method]({ params: { opt: 'hey' } })
+
+  // routes with no params
+  r2[method]({ name: 'nested' })
+  r2[method]({ name: 'nested', params: {} })
   // FIXME: is it possible to support this version
   // // @ts-expect-error: does not accept any params
   // r2[method]({ name: 'nested', params: { eo: 'true' } })
 }
 
+// still allow generics to be passed for convenience
 r2.push({} as unknown as RouteLocationRaw)
 r2.replace({} as unknown as RouteLocationRaw)
 
@@ -144,11 +150,7 @@ declare module '../dist/vue-router' {
   }
 }
 
-function getTypedRouter(): RouterTyped {
-  return {} as any
-}
-
-const typedRouter = getTypedRouter()
+const typedRouter = useRouter()
 // this one is true if we comment out the line with Router: typeof r2
 // expectType<Router>(typedRouter)
 expectType<typeof r2>(typedRouter)