Problems with Intersection Types

[wanton falcon]

Hi There,
I'm not very experienced with Typescript and am getting a compile error with the following code snippet. The compile error refers to the children object. If i cast the Objects inside the children array using as MenuItem, it compiles without any Problems. However, I do not think this is a good solution.

export type MenuRoute = RouteObject & {
    menuEntry?: {
        label: string;
        icon: ReactNode;
        position: number;
    }
    children?: MenuRoute[];
}

export const routes: MenuRoute[] = [
    {
        path: "/",
        element: <Root/>,
        menuEntry: {
            label: "Dashboard",
            icon: <DashboardIcon/>,
            position: 10
        },
        children: [
            {
                path: "/groups",
                element: <h1>TEST</h1>,
                menuEntry: {
                    label: "TEST",
                    icon: <PeopleIcon/>,
                    position: 20
                }
            }
        ]
    }
]

The RouteObject Type is coming from ReactRouter.

Any Help is greatly appreciated.

[magic wind]

Not sure if this is the correct solution, but it does seem to work:

type MenuRoute = Omit<RouteObject, 'children'> & {
    // ...
}

[wanton falcon]

Sadly this does not work. The Type is not compatible with RouteObject anymore, if I do this.

[rapid shard]

if you don't have any index routes in the menu then you could try this:

export type MenuRoute = Omit<NonIndexRouteObject, 'children'> & {
    menuEntry?: {
        label: string;
        icon: ReactNode;
        position: number;
    }
    children?: MenuRoute[];
}

full example: