Конвертировать код функции const из JSX в TSX

Question

Я пытаюсь преобразовать способ определения альтернативного компонента маршрута в JSX в эквивалентный файл TypeScript TSX.(1)

Синтаксис JSX выглядит следующим образом:

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

export const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
        localStorage.getItem('user')
            ? <Component {...props} />
            : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
    )} />
)

Я пытался преобразовать его в TypeScript, но в Visual Studio часть <Component (см. Ниже)подчеркнут, и компилятор TypeScript говорит мне

(TS) JSX element type 'Component' does not have any construct or call signatures.

Я не совсем понимаю синтаксис ({ component: Component, ...rest }) лямбда-функции.Это то, что я написал на TypeScript.

export function PrivateRoute(Component: React.Component, ...rest: any[]) {
    return (
        <Route {...rest} render={props => (
            localStorage.getItem('user')
                ? <Component {...props} />
                : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
        )} />
    );
};

Есть предложения?

Рекомендации:

1. https://www.pointblankdevelopment.com.au/blog/135/react-redux-with-aspnet-core-20-login-registration-tutorial-example#private-route-jsx

Answer 1

Относительно ошибки - JSX / TSX <Component ... будет преобразован во что-то вроде React.createElement(Component..., поэтому тип Component должен быть функцией / классом, не экземпляром.Следовательно, правильная типизация для него будет ComponentType.

Относительно { component: Component, ...rest } - это деструктуризация объекта с присвоением новой переменной .Переданный параметр распаковывается в переменные Component и rest (свойство component параметра переходит в переменную Component, а все остальные свойства - в переменную rest)

Подводя итог,результирующий набор может выглядеть следующим образом:

type RouteProps = { component: React.ComponentType };
export function PrivateRoute(
    { component: Component, ...rest }: RouteProps) {
    ...
};