By typescript, how to declare a member of specific ReactElement type in interface

Question

I want to limit an interface member type for <Route ... /> only, the codes below seems not working.

import React, { ReactElement } from "react";
import { Route, RouteProps } from 'react-router-dom';

import Menu from 'feature/system/menu/Menu';

export interface IRouteConfig{
  readonly path: string,
  readonly name: string,
  readonly comp: ReactElement<RouteProps>,
}

const routes: IRouteConfig[] = [
    {path: "/feature/system/menu/correct", name: "correct menu", comp: <Route path="/feature/system/menu"><Menu /></Route>},
    {path: "/feature/system/menu/error", name: "error menu", comp: <Menu />},
];

export default routes;

what I excepted is a compiler error at second line in routes, but not any. what's the right way to do that?

Answer 1

JSX:

comp = <Route path="/feature/system/menu"><Menu /></Route>

equals to plain javascript

comp = Route({path:"/feature/system/menu", children: Menu()});

ie, running function Route with parameter path and children , and then assigning the function return value to comp.

So, by giving comp a type, you're really typing the return value of Route , typescript doesn't know what parameter you give to it, so it can't be typed!

PS: if you want to type a function's parameter, you need to declare it in function.

export const Menu = (props:RouteProps) => {
...
}

or

export function Menu(props:RouteProps) {
...
}