feat(types): allow extending meta fields (#407)

posva · web-flow · commit 706e84f0099a · 2020-09-05T12:54:20.000+02:00
diff --git a/src/index.ts b/src/index.ts
@@ -20,6 +20,7 @@ export {
 } from './matcher/pathParserRanker'
 
 export {
+  RouteMeta,
   _RouteLocationBase,
   _RouteRecordBase,
   RouteLocationRaw,
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -121,7 +121,7 @@ export interface _RouteLocationBase {
   /**
    * Merged `meta` properties from all of the matched route records.
    */
-  meta: Record<string | number | symbol, any>
+  meta: RouteMeta
 }
 
 // matched contains resolved components
@@ -216,9 +216,11 @@ export interface _RouteRecordBase extends PathParserOptions {
   /**
    * Arbitrary data attached to the record.
    */
-  meta?: Record<string | number | symbol, any>
+  meta?: RouteMeta
 }
 
+export interface RouteMeta extends Record<string | number | symbol, any> {}
+
 export type RouteRecordRedirectOption =
   | RouteLocationRaw
   | ((to: RouteLocation) => RouteLocationRaw)
diff --git a/test-dts/meta.test-d.ts b/test-dts/meta.test-d.ts
@@ -0,0 +1,43 @@
+import { createRouter, createWebHistory, expectType } from './index'
+import { createApp, defineComponent } from 'vue'
+
+const component = defineComponent({})
+
+declare module './index' {
+  interface RouteMeta {
+    requiresAuth?: boolean
+    nested: { foo: string }
+  }
+}
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      component,
+      meta: {
+        requiresAuth: true,
+        lol: true,
+        nested: {
+          foo: 'bar',
+        },
+      },
+    },
+    {
+      path: '/foo',
+      // @ts-ignore
+      component,
+      // @ts-expect-error
+      meta: {},
+    },
+  ],
+})
+
+router.beforeEach(to => {
+  expectType<{ requiresAuth?: Boolean; nested: { foo: string } }>(to.meta)
+  if (to.meta.nested.foo == 'foo' || to.meta.lol) return false
+})
+
+const app = createApp({})
+app.use(router)
