如何添加类型以响应专用路由器组件？

Question

I wanna add private router for auth users. And find simple solution with private router component, but typescript return me type error. I tried to add types any, but that doesn't help. How I may add types here?

Error:(18, 18) TS2322: Type '{ exact: true; path: string; component: typeof Main; }' is not assignable to type 'IntrinsicAttributes & Component<any, any, any>'.
  Property 'exact' does not exist on type 'IntrinsicAttributes & Component<any, any, any>'.

Routers

import { Route, Switch } from 'react-router-dom';
import React, { Component } from 'react';
import app from 'firebase/app';

import Main from "src/Templates/Main/Main.container";
import Login from "src/Templates/Login/Container/Login";
import PrivateRoute from "src/Core/Routers/PrivateRoute";
import {withFirebase} from "src/Templates/Firebase";


class Routes extends Component<any, any> {


    render() {
        return (
            <Switch>
                <PrivateRoute exact  path='/' component={Main} />
                <Route exact path='/login' component={Login} />
            </Switch>
        )
    }
}

export default Routes;

PrivateRouter

import React, {Component} from 'react';
import { Redirect, Route } from 'react-router-dom';


const PrivateRoute = (component: Component<any, any>, { ...rest }: any): any => (
    <Route {...rest} render={(props: any) => (
    props.auth !== null ? (
        <Component {...props} />
    ) : (
    <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
        }}
    />
        )
    )} />
);

//withFirebase() its my HOC fabric component, with provides props for check auth user.

export default withFirebase(PrivateRoute);

Answer 1

When you use type as any, you are ruining the taste of typescript.

Now, looking at your code, I think you want to take the user to a particular path on the basis of the value of auth in props. and all the remaining props should be same as of react-router.

And a clear error I can see in your code is you are receiving each prop as a parameter in the functional component, but it only receives a single parameter, that is the props object.

So in your approach, it should be,

const PrivateRoute = (props: any): any => ()

Now, a cleaner and better approach would be:

import React, {Component} from 'react';
import { RouteProps, Route, Redirect } from 'react-router-dom';
export interface PrivateRouteProps extends RouteProps {
   auth: boolean | null
}

function PrivateRoute({ component: Component, auth, ...rest }: PrivateRouteProps) {
    return (
        <Route
            {...rest}
            render={(props) => auth !== true
                ? <Component {...props} />
                : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />}
        />
    )
}