Nano Hash - криптовалюты, майнинг, программирование

Машинопись, ошибка стилизованного компонента: TS2769: этому вызову не соответствует ни одна перегрузка. Перегрузка 1 из 2

Это мой стилизованный компонент:

const stopPropagation = (event: Event): void => {
  event.stopPropagation();
};

<StyledComp onClick={stopPropagation}> //error occurs here
    hi StyledComp
</StyledComp>

и вот как я это определил:

export type Prop = {
  onClick: (event: Event) => void;
};

export const StyledComp = styled.div<Prop>`
  display: flex;
`;

Но он возвращает ошибку вроде:

TS2769: этому вызову не соответствует ни одна перегрузка. Перегрузка 1 из 2, '(реквизиты: Pick ‹Pick‹ Pick ‹DetailHTMLProps‹ HTMLAttributes, HTMLDivElement ›, title | slot | ... еще 252 ... | is› & {...;} & StyledComp, title |. .. еще 254 ... | is ›& Partial‹ ... ›, title | ... еще 254 ... | is› & {...;} & {...;}): ReactElement ‹. .. ›', выдает следующую ошибку. Тип '(event: Event) = ›void' не может быть назначен типу '((event: MouseEvent‹ HTMLDivElement, MouseEvent ›) =› void) & ((event: Event) = ›void)'. Тип '(event: Event) = ›void' не может быть назначен типу '(event: MouseEvent‹ HTMLDivElement, MouseEvent ›) =› void'. Типы параметров «событие» и «событие» несовместимы. Тип MouseEvent ‹HTMLDivElement, MouseEvent› нельзя присвоить типу Event. Типы собственности "target" несовместимы. Свойство 'value' отсутствует в типе 'EventTarget', но является обязательным в типе '{value: string; } '. Перегрузка 2 из 2, '(props: StyledComponentPropsWithAs ‹div, any, StyledComp, never›): ReactElement ‹StyledComponentPropsWithAs‹ div, any, StyledComp, never ›, string | ... еще 1 ... | (new (props: any) = ›Component‹ ... ›)› ', выдает следующую ошибку. Тип '(event: Event) = ›void' не может быть назначен типу '((event: MouseEvent‹ HTMLDivElement, MouseEvent ›) =› void) & ((event: Event) = ›void)'. Тип '(event: Event) = ›void' не может быть назначен типу '(event: MouseEvent‹ HTMLDivElement, MouseEvent ›) =› void'.

Примечание. Документы по стилевым компонентам и Typescript можно найти здесь!

Изменить:

Это тип события:

export type Event = {
  target: {
    value: string;
  };
  stopPropagation: () => void;
  preventDefault: () => void;
};
reactjs typescript styled-components
11.10.2020

  • Я не уверен, что такое Event, но, НАСКОЛЬКО, нет такого встроенного статического типа. Поэтому, если вы не определили его вручную, вам придется вместо этого использовать React.MouseEvent. 12.10.2020
  • Я определил его вручную, он такой же, как React.MouseEvent. 12.10.2020
  • О, может я ошибаюсь насчет типа события. позвольте мне разобраться, может быть, это проблема 12.10.2020

Ответы:


1

Важная часть сообщения об ошибке:

Тип '(event: Event) = ›void' не может быть назначен типу '(event: MouseEvent‹ HTMLDivElement, MouseEvent ›) =› void'

Итак, свойство onClick стилизованного div имеет тип (event: MouseEvent<HTMLDivElement, MouseEvent>) => void, и вы хотите назначить ему функцию типа (event: Event) => void, но это не работает, потому что типы несовместимы.

Вместо этого вы должны написать:

const stopPropagation = (event: MouseEvent<HTMLDivElement, MouseEvent>): void => {
  event.stopPropagation();
};
11.10.2020
  • Спасибо, я добавил этот тип: React.MouseEvent ‹HTMLElement›, и это сработало. 12.10.2020
  • Просто хотел добавить небольшую заметку к этому правильному ответу. Этот ответ верен, если вы импортируете MouseEvent из реакции следующим образом: import { MouseEvent } from 'react'. MouseEvent для ограничительной обработки событий не является необходимым и бессмысленным, поэтому, если вы хотите использовать ограничительный подход, вы можете сделать это следующим образом: MouseEvent<HTMLElement> или для общего использования вы можете просто использовать только MouseEvent. 12.10.2020
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..