Ошибка "Property 'value' does not exist on type 'Readonly<{}>'" в React и TypeScript

Причина ошибки

Ошибка возникает из-за того, что вы инициализируете useState пустым объектом {}. TypeScript автоматически выводит тип этого состояния как Readonly<{}> — пустой объект, у которого нет никаких свойств. Когда вы пытаетесь обратиться к state.value, TypeScript справедливо сообщает, что такого свойства не существует.

Проблема не в том, что вы добавляете свойство через setState, а в том, что TypeScript проверяет типы статически (на этапе компиляции), а не во время выполнения. Он не знает, что вы планируете добавить туда свойство value позже.

Правильное решение: явное указание типа

Нужно явно указать тип состояния при вызове useState. Есть несколько способов:

• Способ 1: Интерфейс для объекта (рекомендуется для сложных состояний)
• Способ 2: Инлайн-тип (для простых случаев)

Способ 1: Определите интерфейс

import React, { useState } from 'react';

// Определяем интерфейс для состояния
interface MyState {
  value: string;
}

function MyComponent() {
  // Указываем тип явно
  const [state, setState] = useState<MyState>({ value: '' });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setState({ value: e.target.value });
  };

  return (
    <div>
      <input type="text" onChange={handleChange} />
      <p>Value: {state.value}</p>
    </div>
  );
}

Способ 2: Инлайн-тип (для простых случаев)

const [state, setState] = useState<{ value: string }>({ value: '' });

Важные моменты

• Инициализация должна соответствовать типу: Если тип { value: string }, то начальное значение должно содержать это свойство. Нельзя писать useState<{ value: string }>({}) — это тоже вызовет ошибку.
• Если свойство может быть необязательным: Используйте value?: string и проверяйте наличие.
• Для нескольких полей: Добавляйте их в интерфейс и инициализируйте все сразу.

Альтернатива: использование примитива

Если вам нужно хранить только одно строковое значение, не используйте объект — храните строку напрямую:

const [value, setValue] = useState('');

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setValue(e.target.value);
};

return <p>Value: {value}</p>;

Это самый простой и правильный способ для данного случая. Тип string выводится автоматически из начального значения ''.

Почему это работает

Когда вы явно указываете тип useState<{ value: string }>({ value: '' }), TypeScript знает, что в состоянии есть свойство value типа string. При вызове setState он проверяет, что новый объект соответствует этому типу. При чтении state.value он знает, что это строка, и вы можете безопасно использовать её в JSX.

Это одна из ключевых особенностей TypeScript — статическая типизация помогает отлавливать ошибки на этапе разработки, а не во время выполнения.

import React, { useState } from 'react';

function MyComponent() {
  const [state, setState] = useState<Record<string, string>>({});

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setState({ ...state, value: e.target.value });
  };

  return (
    <div>
      <input type="text" onChange={handleChange} />
      <p>Value: {state.value}</p>
    </div>
  );
}

interface MyState {
  value: string;
  label?: string;
}

const [state, setState] = useState<Partial<MyState>>({});