Как можно обернуть вызов setValue из ловушки React useState и поддерживать такую ​​же сигнатуру типа?

Question

Если у меня есть код типа const [value, setValue] = useState<string>("");, тип: React.Dispatch<React.SetStateAction<string>>.

Я хочу что-то иметь const wrappedSetValue = (value: string) => setValue(value.toUpperCase());. Как я могу написать так, чтобы он поддерживал такую ​​же сигнатуру типа setValue?

Answer 1

Вы можете использовать ключевое слово typeof TS, чтобы вывести тип setValue и аннотировать его на wrappedSetValue.

const wrappedSetValue: typeof setValue = (value: string) => setValue(value.toUpperCase());

Честно говоря, это своего рода чит-код React.Dispatch<React.SetStateAction<string>> на самом деле псевдоним типа, который сводится к

(value: string | ((s: string) => string)) => void;

Таким образом, приведенная выше реализация охватывает только половину сигнатуры типа.

Я не уверен, что это то, что вам нужно, но для выполнения объявления подписи вы должны также реализовать другую половину, которая позволяет передавать функцию в качестве параметра:

const wrappedSetValue: typeof setValue = (value: string | ((s: string) => string)) => 
  typeof value == 'string' ? setValue(value.toUpperCase()) : setValue(value);