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

Question

Есть форма поиска SearchPanel.tsx (сделана с использованием Material UI):

const SearchPanel: React.FC<SearchPanelProps> = ({ getCity }) => {
    return (
        <Box
            component="form"
            onSubmit={getCity}
        >
            <TextField
                size='small'
                type="text"
                name='city'
                placeholder='Enter city'
            />
            <Button

                type="submit"
            >
                Get weather
            </Button>
        </Box>
    );
}

Есть функция, которая забирает значение из инпута:

  const [myCity, setMyCity] = useState<string>('');

  const getCity: React.MouseEventHandler | React.KeyboardEventHandler = (e: any): void => {
    e.preventDefault();
    setMyCity(e.target.city.value);

  };

Сейчас событие "е" определено как "any", но это плохая практика, и я хочу избавиться от него. Однако не понимаю, какой тип нужно использовать в данном случае?

Также я не знаю, как корректно передать функцию через пропсы из App.tsx в SearchPanel.tsx.

Я создаю тип для пропсов:

export type SearchPanelProps = {
  getCity: React.MouseEventHandler | React.KeyboardEventHandler
}

И использую его в SearchPanel.tsx:

const SearchPanel: React.FC<SearchPanelProps> = ({ getCity }) => { 
// ... 
}

Однако при таком подходе вылезает ошибка "No overload matches this call". Подскажите, как ее побороть. Спасибо.

Answer 1

В реакте многие штуки уже типизированы, вам лишь надо их правильно использовать.

Т.к. вы используете getCity в onSubmit, все, что нужно сделать - это узнать, какой эвент используется в этом событии.

Если вы создадите функцию прям в пропе компонента Box, после чего наведёте мышкой на аргумент функции (event), то ваш редактор вам подскажет, какой тип он ожидается (см. пример ниже)

const SearchPanel: React.FC = ({getCity}) => {
      return (
          <Box
              component="form"
              onSubmit={(event)=>{}} //Здесь навести на event
          >
            /*какой-то jsx*/
          </Box>
      );
    }

В данном случае ожидается event: React.FormEvent<HTMLFormElement>

Чтобы инпуты были в эвенте сабмита, их необходимо дабавить в типизацию.

//ваши инпуты
type MyFormField = {
  city: HTMLinputElement;
};

//эвент типизируем как пересечение типов
type MyFormSubmitEvent = React.FormEvent<HTMLFormElement & MyFormField>

const getCity = (e:  MyFormSubmitEvent): void => {
  e.preventDefault();
  setMyCity(e.currentTarget.city.value);
};

БЛОГ НА HUSL

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

Ответы (1 шт):