Использование универсального TypeScript с оператором `...rest`

Вот что я делаю:

export default <T extends { color: string },>(props: T) => (
  <Svg height = "20px" width = "20px" version = "1.1" viewBox = "0 0 20 20" {...props:T}>
    <G
      id = "Icons-/-16-/-Arrow-Left"
      fill = "none"
      fillRule = "evenodd"
      stroke = "none"
      strokeWidth = "1"
    >
      <Path
        id = "icon"
        d = "M7.34243727,10.0024497 L14.8286235,2.93169993 C15.04831,2.7247463 15.0578735,2.37909552 14.8510294,2.15985572 C14.6436388,1.94061593 14.2753088,1.9529021 14.0558955,2.15985572 L6.17132265,9.60547002 C6.0620259,9.70867381 6,9.8520124 6,10.0024497 C6,10.1526139 6.0620259,10.2962255 6.17132265,10.3994293 L14.0558955,17.8510106 C14.2753088,18.0579642 14.621233,18.0481353 14.8286235,17.8288955 C15.0354676,17.6096557 15.0256309,17.2640049 14.8062177,17.0567783 L7.34243727,10.0024497 Z"
        fill = {props.color || "#363C52"}
      />
    </G>
  </Svg>
);

Но по какой-то причине я получаю такие ошибки:

Ищем способ правильного использования

javascript reactjs typescript react-native

05.05.2022 17:12

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Поскольку вы используете JSX с TypeScript, он думает, что универсальный элемент на самом деле является элементом JSX, поэтому он ищет идентификатор T для использования в качестве элемента.

Вы можете исправить это, используя именованную функцию (как вы, вероятно, всегда должны делать с компонентами в TypeScript + JSX):

export default function MyComponent<T>(props: T) {
    return ...;
}

Или, если вам нужна функция стрелки, чтобы выжить, вы можете использовать подсказку @PYTHONDEVELOPER999 по добавлению запятой в конце, чтобы она анализировалась как общая:

export default <T,>(props: T) => (...);

Вы также можете поставить кому , после Tjavascript export default <T,>(props: T) => {...}

— 05.05.2022 17:19

Это правда, но мне не очень нравится эстетика завершающей запятой ?

— 05.05.2022 17:21

Спасибо, оба решения классные, не знал, что я не могу использовать анонимные стрелки fns. Но все еще есть проблема с ...rest argument, обновите вопрос.

— 05.05.2022 17:26

@AlexUA Вам не нужно комментировать props с помощью T. Это уже типа T.

— 05.05.2022 17:27

05.05.2022 17:17