Блог

У меня проблема с настройкой типа реквизита.

 export default function PrivateRoute({component: Component, ...rest}) {
  const {currentUser} = useAuth();

      return (
        <Route
          {...rest}
          render={(props) => {
            return currentUser ? <Component {...props} /> : <Redirect to="/" />;
          }}
        ></Route>
      );
    }
 

Я сделал простой Частный маршрут, который в компоненте переименован в компонент с большой буквы C. Но я также хочу установить тип этого компонента для компонента React, как я могу этого добиться? Спасибо.

Вы указываете тип объекта, который вы разрушаете. Например, если Component FunctionComponent<PropsType> | ComponentClass<PropsType> да , то общий объект может быть {component: FunctionComponent<PropsType> | ComponentClass<PropsType>} :

 export default function PrivateRoute<PropsType extends object>(
    {component: Component, ...rest}: {component: FunctionComponent<PropsType> | ComponentClass<PropsType>}
//  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//  destructuring                    type of object
) {
    const {currentUser} = useAuth();
    return (
        <Route
            {...rest}
            render={(props: PropsType) => {
// Note −−−−−−−−−−−−−−−−−−^^^^^^^^^^^
                return currentUser
                    ? <Component {...props} />
                    : <Redirect to="/" />;
            }}
        ></Route>
    );
}
 

Там я использовал параметр типа ( PropsType ), но если у вас есть конкретный тип, который вы можете использовать вместо него, используйте его.