Типизация React + TS

Question

Типизация React + TS

Рейтинг: 0Ответов: 1Опубликовано: 17.01.2023

Прошу помощи с типизацией компонента. Суть:

имеется компонент A): Select.tsx:

    export function Select(props: SelectProps) {
        const { labelId = "select-label", onChange, label, menuItems, ...rest } = props;
        const handleChange = useCallback(
            (event: SelectChangeEvent<unknown>) => {
              if (onChange) {
                onChange(event.target.value);
              }
            },
            [onChange],
          );
    }

интерфейсы:

 export interface SelectProps extends Omit<SelectPropsMui, "onChange"> {
  onChange?: (value: unknown) => void;
  Items: Item[];
}

В данный компонент я передаю:

const handleStatusSelect = useCallback(
    (value: string | unknown) => setStatus(value as string),
    [],
  );

...

<Select onChange={handleStatusSelect} />

Вопрос: правильно ли типизировано value в handleStatusSelect?

reactjs typescript

Источник: Stack Overflow на русском

Answer 1

▲ -1

У вас типизация value в handleStatusSelect не совсем корректна. Тип value должен соответствовать типу, который передается в колбек функцию onChange компонента Select. В интерфейсе SelectProps он определен как unknown, поэтому лучше изменить тип в handleStatusSelect на unknown

const handleStatusSelect = useCallback(
    (value: unknown) => setStatus(value as string),
    [],
  );

Лучше добавить проверку типа или явно преобразовать значение к строке перед использованием, чтобы не возникли ошибки.

Типизация React + TS

Ответы