Как типизировать хуки useState, useRef и обработчики событий в React с TypeScript?

Чаще всего TypeScript выводит тип сам, а явный тип нужен, когда начальное значение не описывает все варианты.

useState

const [count, setCount] = useState(0);            // number выводится сам
const [user, setUser] = useState<User | null>(null); // явный union

useRef

const inputRef = useRef<HTMLInputElement>(null);  // ref на DOM, current: T | null
const timer = useRef<number | undefined>(undefined); // изменяемое значение
inputRef.current?.focus();

Обработчики событий

function onChange(event: React.ChangeEvent<HTMLInputElement>) {
  setValue(event.target.value);
}
function onSubmit(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault();
}

Если обработчик пишется прямо в JSX (onChange={(e) => ...}), тип события выводится по контексту.

useReducer и контекст

Описывайте действия дискриминируемым объединением { type: 'add'; id: string } | { type: 'reset' }. Для контекста лучше создавать значение по умолчанию как undefined и проверять его в кастомном хуке, чем приводить типы через as.

Старайтесь избегать any и as: они отключают проверку именно там, где она нужна.

Коротко для собеседования

Для useState тип нужен, когда начальное значение не описывает все варианты, useRef типизируют под DOM-элемент с null, события берут из React.ChangeEvent и подобных. Избегайте any и as.