Какой тип я должен объявить для объекта отдыха реквизита?

Question

Ниже приведен пример реакции на маршрутизатор для добавления компонента для защищенных маршрутов:

function PrivateRoute({ component: Component, ...rest }) {
  return (
    <Route
      {...rest}
      render={props =>
        fakeAuth.isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: props.location }
            }}
          />
        )
      }
    />
  );
}

https://reacttraining.com/react-router/web/example/auth-workflow

Я попытался реализовать эту функцию в своем проекте Typescript, используя приведенный выше пример в качестве вдохновения.

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

interface PrivateRouteProps {
    component: React.Component; // passed as prop
    isSignedIn: boolean; // injected as prop by redux
    location: Location;
}

const PrivateRoute = (props: PrivateRouteProps) => {
    const { component: Component, isSignedIn, location } = props;

    return (
        <Route
            {...rest}
            render={(routeProps) =>
                isSignedIn ? (
                    <Component {...routeProps} />
                ) : (
                        <Redirect
                            to={{
                                pathname: '/signin',
                                state: { from: location }
                            }}
                        />
                    )
            }
        />
    );
};

export default PrivateRoute;

Я получаю следующие ошибки

[ts] Cannot find name 'rest'.
any

[ts] JSX element type 'Component' does not have any construct or call signatures.
const Component: React.Component<{}, {}, any>

Answer 1

1) Вы не вытащили оставшиеся реквизиты у своего оператора деструктуры, чтобы получить остальные реквизиты, вам понадобится:

const { component: Component, isSignedIn, location, ...rest } = props;

2) Component это не то, что вы думаете здесь, это интерфейс для конструирования элементов класса, но вы используете его для определения типа. Если вы хотите применить его в качестве элемента, вам нужно использовать JSX.Element.

В конечном итоге вы должны остаться с:

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

interface PrivateRouteProps {
    component: JSX.Element; // passed as prop
    isSignedIn: boolean; // injected as prop by redux
    location: Location;
}

const PrivateRoute = (props: PrivateRouteProps) => {
    const { component, isSignedIn, location, ...rest } = props;

    return (
        <Route
            {...rest}
            render={(routeProps) =>
                isSignedIn ? (
                    <Component {...routeProps} />
                ) : (
                        <Redirect
                            to={{
                                pathname: '/signin',
                                state: { from: location }
                            }}
                        />
                    )
            }
        />
    );
};

export default PrivateRoute;