запутался в типах Typescript

Question

В вот таком куске кода для простого todo list:

 function App() {
  const [newItem, setNewItem] = useState<string>("");
  const [items, setItems] = useState<string[]>([]);

  type itemType = {
    id: number;
    value: string;
  };

  function addItems(): void {
    const item: itemType = {
      id: Math.floor(Math.random() * 1000),
      value: newItem,
    };

    setItems(oldList => [...oldList, item]);

    setNewItem("");
  }

  return (
    <div className="todoList">
      <div>
        <h1>Todo list</h1>
        <input
          value={newItem}
          onChange={(e) => setNewItem(e.target.value)}
          type="text"
          placeholder="Add some items..."
        />
        <button onClick={() => addItems()}>add</button>
        <ul>
          {items.map((item) => {
            return <li>{item}</li>;
          })}
        </ul>
      </div>
    </div>
  );
}

Ловлю такую ошибку:

Answer 1

В стейте items вы объявили дженерик string[], а это значит, что массив состоит из строк.

В методе addItem вы пытаетесь в массив строк добавить объект. Измените тип с string[] на itemType[], itemType вынесите в отдельный файл для типов, либо за пределы функции и всё должно заработать должным образом:

type itemType = {
    id: number;
    value: string;
};

function App() {
  const [newItem, setNewItem] = useState<string>("");
  const [items, setItems] = useState<itemType[]>([]);

  function addItems(): void {
    const item: itemType = {
      id: Math.floor(Math.random() * 1000),
      value: newItem,
    };

    setItems(oldList => [...oldList, item]);

    setNewItem("");
  }

  return (
    <div className="todoList">
      <div>
        <h1>Todo list</h1>
        <input
          value={newItem}
          onChange={(e) => setNewItem(e.target.value)}
          type="text"
          placeholder="Add some items..."
        />
        <button onClick={() => addItems()}>add</button>
        <ul>
          {items.map((item) => {
            return <li>{item}</li>;
          })}
        </ul>
      </div>
    </div>
  );
}

БЛОГ НА HUSL

запутался в типах Typescript

Ответы (1 шт):