javascript - JSX'den TSX'e const fonksiyon kodunu dönüştür

JSX'de tanımlanmış bir alternatif rota bileşeninin nasıl TypeScript TSX dosyasına dönüştürüleceğini anlamaya çalışıyorum. (1)

JSX sözdizimi şöyle:

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

Bunu TypeScript'e dönüştürmeyi denedim, ancak Visual Studio'da <Component kısmı (aşağıya bakın) altı çizili ve TypeScript derleyicisi bana şunu söylüyor

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

Lambda fonksiyonunun ({ component: Component, ...rest }) sözdizimini gerçekten anlamıyorum. TypeScript'te bunu yazmada şu ana kadar bu kadar ilerleyebildim.

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

Herhangi bir öneri?

Kaynaklar :

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

Cevap #1

Hata ile ilgili olarak - JSX/TSX <Component ... yaklaşımları React.createElement(Component... gibi bir şeye dönüştürülecektir, bu nedenle Component türü bir fonksiyon/sınıf olmalı, bir örnek değil. Bu nedenle bunun doğru tipi ComponentType olacaktır.

{ component: Component, ...rest } ile ilgili olarak - bu, yeni bir değişkene atama ile nesne ayrıştırmasıdır. Geçilen parametre Component ve rest değişkenlerine ayrılır (parametrenin component özelliği Component değişkenine gider ve kalan tüm özellikler rest değişkenine gider)

Özetlemek gerekirse, ortaya çıkan yazım şöyle görünebilir:

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

İlgili makaleler