javascript - Konvertera const-funktionskod från JSX till TSX

Jag försöker konvertera hur en alternativ ruttkomponent definieras i JSX till en motsvarande TypeScript TSX-fil. (1)

JSX-syntaxen ser ut så här:

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 } }} />
    )} />
)

Jag har försökt att konvertera det till TypeScript, men i Visual Studio är <Component-delen (se nedan) understruken och TypeScript-kompilatorn säger till mig

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

Jag förstår verkligen inte syntaxen ({ component: Component, ...rest }) för lambda-funktionen. Detta är så långt jag har kommit med att skriva det i 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 } }} />
        )} />
    );
};

Några förslag?

Referenser :

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

Svar #1

Angående felet - JSX/TSX <Component ... kommer att konverteras till något som React.createElement(Component..., så Component-typen bör vara en funktion/klass, inte en instans. Därför kommer korrekt typning för det att vara ComponentType.

Angående { component: Component, ...rest } - detta är en objektdestrukturering med tilldelning till en ny variabel. Den passerade parametern packas upp till variablerna Component och rest (component-egenskapen hos parametern går till Component-variabeln och alla övriga egenskaper går till rest-variabeln)

Sammanfattningsvis kan den resulterande typningen se ut så här:

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

Relaterade artiklar