将常量函数代码从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中， 部分（见下文）带有下划线，TypeScript编译器告诉我

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

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 将转换为类似于 react.createElement(component...，所以 component类型应该是函数/类，而不是实例。因此，正确的类型应该是 componenttype。

关于{Component:Component,...rest}-这是一个对象析构，赋值给新变量。传递的参数被解压缩到变量组件和rest（参数的组件属性转到组件变量，所有rest属性转到rest变量）

总而言之，结果的键入可能如下所示：

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