新手-反应打字稿待办事项

问题描述

您能帮我解决一个简单的问题吗？我一直在React中编程，但是我一直在使用纯js。最近尝试过渡到TS，但我讨厌它的每一点，但试图理解所有这些炒作。您能否使用我编写的部分代码给我一个很好使用打字稿的示例？这是一个简单的待办事项清单，但遇到了我遇到的所有问题-在JS中可以正常工作！

仅向我展示应该如何做，在弄清楚背后的正确逻辑之后，我将尝试编写实际的应用程序。

const NoteApp = () => {
  const [notes,setNotes] = useState<Array<string>>()
  const [title,setTitle] = useState<string>('')
  const [body,setBody] = useState<string>('')

  const addNote = (e:any) => {
      e.preventDefault()

      setNotes([
          ...notes,{ title,body }
      ])
      setTitle('')
      setBody('')
  }

  const removeNote = (title:any) => {
      setNotes(notes.filter((note) => note.title !== title))
  }

  return (
      <div>
          <h1>Notes</h1>
          {notes.map((note) => (
              <div key={note.title}>
                  <h3>{note.title}</h3>
                  <p>{note.body}</p>
                  <button onClick={() => removeNote(note.title)}>x</button>
              </div>
          ))}
          <p>Add note</p>
          <form onSubmit={addNote}>
              <input value={title} onChange={(e) => setTitle(e.target.value)} />
              <textarea value={body} onChange={(e) => setBody(e.target.value)}></textarea>
              <button>add note</button>
          </form>
      </div>
  )
}

解决方法

Typescript只是一种工具，可让您的代码更易于重编且不会出现错误。 它为您提供了确保约90％的未定义错误消失的方法。 在这种情况下，您可以像这样声明便笺的形状

type Note = {
    title: string;
    body: string;
};

const NoteApp = () => {
    const [notes,setNotes] = useState<Array<Note>>([]);
    const [title,setTitle] = useState<string>('');
    const [body,setBody] = useState<string>('');

    const addNote = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();

        setNotes([...notes,{ title,body }]);
        setTitle('');
        setBody('');
    };

    const removeNote = (title: string) => {
        setNotes(notes.filter((note) => note.title !== title));
    };

    const onTileChange = (e: React.ChangeEvent<HTMLInputElement>) => setTitle(e.target.value);
    const onBodyChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => setBody(e.target.value);

    return (
        <div>
            <h1>Notes</h1>
            {notes.map((note) => (
                <div key={note.title}>
                    <h3>{note.title}</h3>
                    <p>{note.body}</p>
                    <button onClick={() => removeNote(note.title)}>x</button>
                </div>
            ))}
            <p>Add note</p>
            <form onSubmit={addNote}>
                <input value={title} onChange={onTileChange} />
                <textarea value={body} onChange={onBodyChange} />
                <button type="submit">add note</button>
            </form>
        </div>
    );
};