Как правильно решить проблему TS2345?

Question

[tron21]

Всем привет! Изучаю TypeScript и у меня появилась сложность с событиями мышки. Есть изображение и при наведении мышки на него должна срабатывать функция. Изображений несколько и в зависимости от изображения передаётся определенный аргумент в функции. Этот аргумент строка. Все выполнено в React. Но у меня срабатывает ошибка TS2345: Argument of type 'string' is not assignable to parameter of type 'MouseEvent '. Не могу понять что тогда прописывать в интерфейсе чтобы строку можно было передать аргументом. Пытался найти информацию по данной ситуации с MouseEvent в интернете, но не преуспел.

Вот как выглядит этот img

<img
              onMouseEnter={() => { handleChangeInfoMain(design); }}
              onMouseLeave={infoMainSetTimeout}
              className="info-main__logo"
              src={infoMainValue.img.imgName === 'design' ? designActive : designNoActive}
              alt="logo"
            />

Вот как выглядит часть интерфейса

handleChangeInfoMain: MouseEventHandler<HTMLImageElement>,
  infoMainSetTimeout: MouseEventHandler<HTMLImageElement>,

А вот так выглядит функция handleChangeInfoMain в компоненте App

const handleChangeInfoMain = (value : string): void => {
    if (value === 'design') {
      console.log(value);
    } else {
      console.log('ничего');
    }
  };

Заранее благодарю за помощь.

Answer 1

[HealSpirit]

Что такое MouseEventHandler? Эта функция, которая принимает в качестве аргумента event c типом MouseEvent и возвращает пустоту

У вас функция handleChangeInfoMain типизирована как MouseEventHandler, хотя аргумент типизируется как string

Попробуйте вот так:
handleChangeInfoMain: (value: string) => void

Comments

[tron21]

Ах, теперь понял. Я изначально не так понял логику с интерфейсом и с событиями мышки. Теперь всё работает. Только эслинт ругается на value в интерфейсе, но с этим разберусь думаю.) Спасибо за помощь!