noob - 反应打字稿待办事项答案

【问题标题】：noob - react typescript todonoob - 反应打字稿待办事项
【发布时间】：2020-10-22 19:29:31
【问题描述】：

你能帮我解决一个简单的问题吗？我一直在用 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>
  )
}

【问题讨论】：

标签： reactjs typescript react-tsx

【解决方案1】：

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>
    );
};

【讨论】：