Reactjs noob-react类型脚本todo

你能帮我解决一个简单的问题吗？我一直在React中编程，但我总是使用纯js。最近我试着过渡到TS，我讨厌它的每一个细节，但我试图理解所有这些炒作。你能不能用我写的代码给我举一个很好地使用typescript的例子？这是一个简单的待办事项列表，但有我遇到的所有问题-在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>
  )
}

constnoteapp=（）=>{
const[notes，setNotes]=useState（）
const[title，setTitle]=useState（“”）
const[body，setBody]=useState（“”）
const addNote=（e:any）=>{
e、 预防默认值（）
布景([
……注意到，
{标题，正文}
])
setTitle（“”）
立根体（“”）
}
const removeNote=（标题：any）=>{
setNotes（notes.filter（（note）=>note.title！==title））
}
返回(
笔记
{notes.map（（note）=>(
{注.标题}
{注.正文}

removeNote（注.标题）}>x
))}
添加注释

setTitle（e.target.value）}/>
setBody（例如target.value）}>
添加注释
)
}

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

类型注释={
标题：字符串；
正文：字符串；
};
常量NoteApp=（）=>{
const[notes，setNotes]=useState（[]）；
const[title，setTitle]=useState（“”）；
const[body，setBody]=useState（“”）；
const addNote=（e:React.FormEvent）=>{
e、 预防默认值（）；
setNotes（[…notes，{title，body}]）；
片名（“”）；
立根体（“”）；
};
const removeNote=（标题：string）=>{
setNotes（notes.filter（（note）=>note.title！==title））；
};
constontilechange=（e:React.changevent）=>setTitle（e.target.value）；
const onBodyChange=（e:React.changevent）=>setBody（e.target.value）；
返回(
笔记
{notes.map（（note）=>(
{注.标题}
{注.正文}

removeNote（注.标题）}>x
))}
添加注释

添加注释
);
};

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

类型注释={
标题：字符串；
正文：字符串；
};
常量NoteApp=（）=>{
const[notes，setNotes]=useState（[]）；
const[title，setTitle]=useState（“”）；
const[body，setBody]=useState（“”）；
const addNote=（e:React.FormEvent）=>{
e、 预防默认值（）；
setNotes（[…notes，{title，body}]）；
片名（“”）；
立根体（“”）；
};
const removeNote=（标题：string）=>{
setNotes（notes.filter（（note）=>note.title！==title））；
};
constontilechange=（e:React.changevent）=>setTitle（e.target.value）；
const onBodyChange=（e:React.changevent）=>setBody（e.target.value）；
返回(
笔记
{notes.map（（note）=>(
{注.标题}
{注.正文}

removeNote（注.标题）}>x
))}
添加注释

添加注释
);
};