Как правильно копировать интерфейс и переносить функции, события в TypeScript?

Question

[tron21]

Всем привет! Изучаю TypeScript и не могу никак решить две проблемы. Выложу код сразу трех компонентов React, чтобы было лучше видно в чем вопрос.

Есть один компонент. В нем отрисовываются данные и есть два события мышки. Все это я передаю в следующий компонент, откуда я передаю его уже в App. Там находится стейт с данными и функции которые выполняются при событии.

1 вопрос - в 1 компоненте ( InfoMain ) при событии onMouseEnter я вызываю функцию handleChangeInfoMain. В App она прописана и там указано что единственный параметр может быть any. Когда я в InfoMain ее вызываю и передаю аргумент , то вылетает ошибка ТС TS2304: Cannot find name 'design'. Неужели обязательно чтобы этот design был чем-то? Разве это не может быть просто аргумент в виде этого значения без того чтобы где-то делать константу со значением design?
2 вопрос - во 2 компоненте мне пришлось повторно дублировать интерфейс со значениями для пропсов. Этот интерфейс идентичен тому что в 1 компоненте. Каким способом можно корректно импортировать интерфейс из 1 компонента во 2 чтобы все корректно сработало? У меня, пока что , не получилось это сделать.

Всем заранее спасибо за помощь! Код 3 компонентов ниже.
1 компонент

export interface InfoMainProps {
  infoMainValue: {
    title: string,
    subtitle: string,
    img: {
      imgSrc: string,
      imgName: string,
    }

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

export const InfoMain: FC<InfoMainProps> = ({ infoMainValue, handleChangeInfoMain, infoMainSetTimeout }) => (
  <section className="info-main">
    <div className="container info-main__bootstrap-container">
      <div className="row info-main__container">
        <div className="col-4 info-main__content-container">
          <div className="info-main__text-container">
            <h2 className="info-main__title">{infoMainValue.title}</h2>
            <p className="info-main__subtitle">{infoMainValue.subtitle}</p>
          </div>
          <div className="info-main__logo-container">
            <img
              onMouseEnter={() => { handleChangeInfoMain(design); }}
              onMouseLeave={infoMainSetTimeout}
              className="info-main__logo"
              src={infoMainValue.img.imgName === 'design' ? designActive : designNoActive}
              alt="logo"
            />
            <img
              onMouseEnter={() => { handleChangeInfoMain(development); }}
              onMouseLeave={infoMainSetTimeout}
              className="info-main__logo"
              src={infoMainValue.img.imgName === 'development' ? developmentActive : developmentNoActive}
              alt="logo"
            />
            <img
              onMouseEnter={() => { handleChangeInfoMain(promotion); }}
              onMouseLeave={infoMainSetTimeout}
              className="info-main__logo"
              src={infoMainValue.img.imgName === 'promotion' ? promotionActive : promotionNoActive}
              alt="logo"
            />
          </div>
        </div>
        <img className="col-5 info-main__image" src={infoMainValue.img.imgSrc} alt="icon" />
      </div>
    </div>
  </section>
);

2 компонент.

interface MainProps {
  infoMainValue: {
    title: string,
    subtitle: string,
    img: {
      imgSrc: string,
      imgName: string,
    }

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

}
const Main: FC<MainProps> = ({ infoMainValue, handleChangeInfoMain, infoMainSetTimeout }) => (
  <>
    <InfoMain
      infoMainValue={infoMainValue}
      handleChangeInfoMain={handleChangeInfoMain}
      infoMainSetTimeout={infoMainSetTimeout}
    />
    <ProjectsMain />
    <Reviews />

  </>

);
export default Main;

И 3 компонент App

import {
  defaultObj, designObj, developmentObj, promotionObj,
} from '../../utils/constants';

const App: React.FC = (): ReactElement => {
  const [infoMainValue, setInfoMainValue] = useState(defaultObj);

  const infoMainPutDefault = (): void => {
    setInfoMainValue(defaultObj);
  };
  const infoMainSetTimeout = (): void => {
    setTimeout(infoMainPutDefault, 3000);
  };

  const handleChangeInfoMain = (value : any): void => {
    console.log(value);
  };

  return (
    <div className="page">
      <BrowserRouter>
        <Header />
        <Switch>
          <Route
            exact
            path="/"
          >
            <Main
              infoMainValue={infoMainValue}
              handleChangeInfoMain={handleChangeInfoMain}
              infoMainSetTimeout={infoMainSetTimeout}
            />
          </Route>

        </Switch>
        <Footer />
      </BrowserRouter>
    </div>
  );
};

export default App;

Answer 1

[Дмитрий Беляев]

1. У Вас переменная design нигде не объявлена, откуда она должна взяться-то? Аналогично будет с другими переменными: designActive, designNoActive, development, developmentActive, developmentNoActive, promotion, promotionActive, promotionNoActive
2. Что мешает просто сделать import?

Comments

[tron21]

1. Все переменные Active и NoActive объявлены. А здесь я что-то позабыл основы уже. Спасибо за ответ!
2. В будущем в интерфейс для компонента Main буду записывать ещё другие данные для других дочерних компонентов и самого компонента Main. И пытаюсь понять как правильно оформить тогда этот интерфейс и импорт с дочернего если там будут и другие