Как объявить тип для функционального компонента React с помощью деструктуризации объекта в props? - PullRequest
Новая
       40

Как объявить тип для функционального компонента React с помощью деструктуризации объекта в props?

1 голос
/ 05 мая 2020

Я все еще изучаю TypeScript и объявляю (продвинутые) типы. Я пытаюсь преобразовать свой проект CRA в машинописный текст, и в нем есть следующий компонент. Как мне объявить типы для этого?

Этот компонент почти 1: 1 из примеров response-router-dom, но я не смог найти ни одного примера, показывающего это, написанное на TypeScript 

// ProtectedContent.tsx

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import Auth from '../services/Auth';

const ProtectedContent = ({ component: Component, ...rest }) => {
  return (
    <Route {...rest} render={(props) => {
      if (Auth.isAuthenticated()) {
        return (
          <Component {...props} />
        );
      } else {
        return (
          <Redirect to={{
            pathname: '/auth/signin',
            state: { from: props.location },
          }} />
        );
      }
    }} />
  );
};

export default ProtectedContent;

Я попытался создать интерфейс для параметров: 

interface PCProps extends HTMLAttributes<HTMLElement>{
  component: React.Component;
}

const ProtectedContent = ({ component: Component, ...rest }: PCProps) => {
   // .......
}

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

return (
  <Component {...props} />
);

, так как возникла ошибка

Тип элемента JSX «Компонент» не имеет никаких конструкций или сигнатур вызовов. ts (2604)

Затем, когда я пытался это исправить, я закончил спускаться в безумную кроличью нору и потерял из виду и понимание того, что происходит дальше.

Итак, как следует Я объявляю типы для этого, чтобы компонент мог быть любым компонентом React, а затем аккуратно деструктурировать остальные реквизиты?

Версия TS - 3.8.3

Изменить: (Возможное решение )

Из глубин инте rnet нашел вот это "решение". Я могу объявить компонент в интерфейсе PCProps как ReactType и использовать его следующим образом: 

interface PCProps {
  component: React.ReactType;
}

const ProtectedContent = ({ component: Component, ...rest }): PCProps => {
  ...
}

Это избавит от ошибки, но почему? Что это за «ReactType»? Я просмотрел документы и не нашел ничего, связанного с этим. Есть ли кто-нибудь, имеющий опыт работы с React и TS, кто мог бы объяснить это, а также то, как этот тип компонентов должен быть набран?

Мне не очень нравится использовать это решение, потому что я понятия не имею, что происходит.

Источник решения

Edit2:

Песочница, показывающая исходное предлагаемое решение с использованием React.F C и возможное решение с использованием React.ReactType. Проверьте все три файла в этой песочнице.

Песочница для этого вопроса

1 Ответ

0 голосов
/ 05 мая 2020

Убедитесь, что расширение вашего файла .tsx, а не .ts, и что вы объявляете component: React.FC;. Рабочий пример: codesandbox.io/s/silly-hamilton-1xuyu?file=/src/App.tsx:95-97

...