types: add RouteMeta interface to enable module augmentation (#3385)

Co-authored-by: Eduardo San Martin Morote <[email protected]>

Author: HoldYourWaffle

types/index.d.ts

@@ -5,6 +5,7 @@ export default VueRouter
 
 export {
   RouterMode,
+  RouteMeta,
   RawLocation,
   RedirectOption,
   RouterOptions,

types/router.d.ts

@@ -126,7 +126,7 @@ interface _RouteConfigBase {
   children?: RouteConfig[]
   redirect?: RedirectOption
   alias?: string | string[]
-  meta?: any
+  meta?: RouteMeta
   beforeEnter?: NavigationGuard
   caseSensitive?: boolean
   pathToRegexpOptions?: PathToRegexpOptions
@@ -153,7 +153,7 @@ export interface RouteRecord {
   parent?: RouteRecord
   redirect?: RedirectOption
   matchAs?: string
-  meta: any
+  meta: RouteMeta
   beforeEnter?: (
     route: Route,
     redirect: (location: RawLocation) => void,
@@ -205,5 +205,7 @@ export interface Route {
   fullPath: string
   matched: RouteRecord[]
   redirectedFrom?: string
-  meta?: any
+  meta?: RouteMeta
 }
+
+export interface RouteMeta extends Record<string | number | symbol, any> {}

types/test/index.ts

@@ -18,7 +18,9 @@ const Abc = { template: '<div>abc</div>' }
 const Async = () => Promise.resolve({ template: '<div>async</div>' })
 
 let err: any
-if (VueRouter.isNavigationFailure(err, VueRouter.NavigationFailureType.aborted)) {
+if (
+  VueRouter.isNavigationFailure(err, VueRouter.NavigationFailureType.aborted)
+) {
   err.from.fullPath.split('/')
 }
 
@@ -104,7 +106,7 @@ const router = new VueRouter({
             abc: Abc,
             asyncComponent: Async
           },
-          meta: { auth: true },
+          meta: { auth: true, nested: { foo: '' } },
           beforeEnter(to, from, next) {
             to.params
             from.params
@@ -229,7 +231,7 @@ const Components: (
   | AsyncComponent
 )[] = router.getMatchedComponents()
 
-const match: Route = router.match('/more');
+const match: Route = router.match('/more')
 
 const vm = new Vue({
   router,

types/test/meta.ts

@@ -0,0 +1,45 @@
+import VueRouter from '../index'
+
+const component = { template: '<div>home</div>' }
+
+declare module '../index' {
+  export interface RouteMeta {
+    requiresAuth?: boolean
+    nested: { foo: string }
+  }
+}
+
+const router = new VueRouter({
+  routes: [
+    {
+      path: '/',
+      component,
+      meta: {
+        requiresAuth: true,
+        // still allowed
+        other: true,
+        nested: {
+          foo: 'bar'
+        }
+      }
+    },
+    {
+      path: '/foo',
+      component,
+      // @ts-expect-error
+      meta: {}
+    }
+  ]
+})
+
+router.beforeEach(to => {
+  // should pass
+  if (to.meta!.requiresAuth === true) {
+  }
+  // still pass because any
+  if (to.meta!.lol === true) {
+  }
+  // @ts-expect-error: nested will never be true
+  if (to.meta!.nested === true) {
+  }
+})