Типизация состояния (useState) в TypeScript

Типизация состояния в React с помощью хука useState позволяет явно указать, какие значения может принимать переменная состояния. Это предотвращает ошибки при присвоении несовместимых типов и улучшает читаемость кода.

Явное указание типа состояния

Хук useState — обобщённая (generic) функция. Тип состояния указывается в угловых скобках:

const [count, setCount] = useState<number>(0);

Здесь TypeScript знает, что count всегда будет числом, а setCount принимает только число.

Если начальное значение не позволяет однозначно определить тип (например, null), тип нужно указывать явно:

const [user, setUser] = useState<User | null>(null);

Без явного указания TypeScript выведет тип как null, и позже нельзя будет присвоить объект типа User.

Объединение типов

Часто состояние может иметь несколько допустимых форм. Например, данные могут быть либо загружены, либо ещё нет:

type LoadingState = 'idle' | 'loading' | 'success' | 'error';

const [status, setStatus] = useState<LoadingState>('idle');

Такой подход делает логику компонента более предсказуемой и защищённой от случайных значений.

Типизация объектов и массивов

Для сложных структур также требуется явное указание:

interface Todo {
  id: string;
  text: string;
  completed: boolean;
}

const [todos, setTodos] = useState<Todo[]>([]);

Если не указать тип, TypeScript может вывести его как never[], и добавление элементов вызовет ошибку.

Когда тип выводится автоматически

Если передать начальное значение с чётким типом, дополнительная аннотация не нужна:

const [name, setName] = useState(''); // тип string выводится автоматически

Однако при работе с React Native и особенно в крупных проектах рекомендуется указывать тип явно — это упрощает поддержку и рефакторинг.