fix(types): allow simpler type check of route records (#1453)

Fix #1452

Author: posva

packages/router/__tests__/matcher/resolve.spec.ts

@@ -42,11 +42,9 @@ describe('RouterMatcher.resolve', () => {
       throw new Error('not handled')
     } else {
       // use one single record
-      // @ts-expect-error: One way or the other it false
       if (!resolved.matched) resolved.matched = record.map(normalizeRouteRecord)
       // allow passing an expect.any(Array)
       else if (Array.isArray(resolved.matched))
-        // @ts-expect-error: same as above
         resolved.matched = resolved.matched.map(m => ({
           ...normalizeRouteRecord(m as any),
           aliasOf: m.aliasOf,

packages/router/src/matcher/index.ts

@@ -159,7 +159,7 @@ export function createRouterMatcher(
           removeRoute(record.name)
       }
 
-      if ('children' in mainNormalizedRecord) {
+      if (mainNormalizedRecord.children) {
         const children = mainNormalizedRecord.children
         for (let i = 0; i < children.length; i++) {
           addRoute(
@@ -353,7 +353,6 @@ export function normalizeRouteRecord(
     aliasOf: undefined,
     beforeEnter: record.beforeEnter,
     props: normalizeRecordProps(record),
-    // @ts-expect-error: record.children only exists in some cases
     children: record.children || [],
     instances: {},
     leaveGuards: new Set(),

packages/router/src/matcher/types.ts

@@ -4,7 +4,7 @@ import {
   _RouteRecordBase,
   _RouteRecordProps,
   NavigationGuardNextCallback,
-  RouteRecordSingleViewWithChildren,
+  RouteRecordRaw,
 } from '../types'
 import { ComponentPublicInstance } from 'vue'
 
@@ -32,7 +32,7 @@ export interface RouteRecordNormalized {
   /**
    * Nested route records.
    */
-  children: RouteRecordSingleViewWithChildren['children']
+  children: RouteRecordRaw[]
   /**
    * {@inheritDoc _RouteRecordBase.meta}
    */

packages/router/src/types/index.ts

@@ -262,6 +262,11 @@ export interface _RouteRecordBase extends PathParserOptions {
    * Arbitrary data attached to the record.
    */
   meta?: RouteMeta
+
+  /**
+   * Array of nested routes.
+   */
+  children?: RouteRecordRaw[]
 }
 
 /**
@@ -298,6 +303,9 @@ export interface RouteRecordSingleView extends _RouteRecordBase {
    */
   component: RawRouteComponent
   components?: never
+  children?: never
+  redirect?: never
+
   /**
    * Allow passing down params as props to the component rendered by `router-view`.
    */
@@ -314,9 +322,6 @@ export interface RouteRecordSingleViewWithChildren extends _RouteRecordBase {
   component?: RawRouteComponent | null | undefined
   components?: never
 
-  /**
-   * Array of nested routes.
-   */
   children: RouteRecordRaw[]
 
   /**
@@ -334,6 +339,8 @@ export interface RouteRecordMultipleViews extends _RouteRecordBase {
    */
   components: Record<string, RawRouteComponent>
   component?: never
+  children?: never
+  redirect?: never
 
   /**
    * Allow passing down params as props to the component rendered by
@@ -352,6 +359,7 @@ export interface RouteRecordMultipleViewsWithChildren extends _RouteRecordBase {
    */
   components?: Record<string, RawRouteComponent> | null | undefined
   component?: never
+  redirect?: never
 
   children: RouteRecordRaw[]
 

packages/router/test-dts/perfNamedRoutes.test-d.ts

@@ -11,10 +11,29 @@ routes.push({ path: '/', redirect: '/foo' })
 // @ts-expect-error cannot have components and component at the same time
 routes.push({ path: '/', components, component })
 
+// a redirect record with children to point to a child
 routes.push({
   path: '/',
   redirect: '/foo',
-  children: [],
+  children: [
+    {
+      path: 'foo',
+      component,
+    },
+  ],
+})
+
+// same but with a nested route
+routes.push({
+  path: '/',
+  component,
+  redirect: '/foo',
+  children: [
+    {
+      path: 'foo',
+      component,
+    },
+  ],
 })
 
 routes.push({ path: '/', component, props: true })
@@ -29,3 +48,14 @@ routes.push({ path: '/', components, props: true })
 //   component,
 //   components,
 // }
+
+export function filterNestedChildren(children: RouteRecordRaw[]) {
+  return children.filter(r => {
+    if (r.redirect) {
+      r.children?.map(() => {})
+    }
+    if (r.children) {
+      r.children = filterNestedChildren(r.children)
+    }
+  })
+}