Javascript react和typescript-从获取的数据映射对象数组

最近在我的工作中，我们使用react with typescript。。说真的，我是个新手，我觉得做任何函数都是愚蠢的。。用它。。但在我的空闲时间里，我试着更多地学习打字。。我对typescript中的钩子有点困惑。。有人能告诉我如何在对象数组中映射对象吗？我尝试了很多方法，甚至检查了类似的问题，但我无法解决我的问题

例如，通常情况下，如果我使用ES6+，我会感到非常舒适，因此在这种情况下，我宁愿向您展示我想要的。如果我得到这个简单的例子，我想我会更理解打字脚本

   const App = () => {
     const [data, setData] = data([]);
     const [query, setQuery] = query("");

     const handleSubmit = (e) => {
        e.preventDefault();
        if (query) {
            const newItem = {id: new Date().getTime().toString(), query};
            setData([...data, newItem]);
        }
     }

     return (
        <section className="section">
            <form onSubmit={handleSubmit}>
                <div className="form-control">
                    <label forHTML="input">Add new</label>
                    <input type="text" id="input"/>
                    <button type="submit">Add</button>
                </div>
            </form>
            <article className="someData">
                {data.map(item => {
                    return <div className="box">
                        <h2>{item.title}</h2>
                    </div>
                })}
            </article>
        </section>
    )
}

const-App=（）=>{
const[data，setData]=数据（[]）；
const[query，setQuery]=query（“”）；
常量handleSubmit=（e）=>{
e、 预防默认值（）；
如果（查询）{
const newItem={id:new Date（）.getTime（）.toString（），query}；
setData（[…数据，newItem]）；
}
}
返回(
新增
添加
{data.map（项=>{
返回
{item.title}
})}
)
}

我知道这个例子没有多大意义，但如果我知道如何用typescript编写它，我就可以知道typescript的工作原理。我已经阅读了文档，每当我想映射我的对象时，我总是将它键入数组或对象，甚至是“any”，但什么都不起作用：（我只是好奇这个用ES6编写的函数在typescript中会是什么样子。

import-React，{useState}来自'React'；
import React, { useState } from 'react';

interface Data {
  id: string;
  query: string;
}

const App: React.FC<{}> = () => {
  const [data, setData] = useState<Data[]>([]);
  const [query, setQuery] = useState<string>(''); 

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
    e.preventDefault();
    if (query) {
      const newItem: Data = { id: new Date().getTime().toString(), query };
      setData([...data, newItem]);
    }
  };

  return (
    <section className="section">
      <form onSubmit={handleSubmit}>
        <div className="form-control">
          <label forHTML="input">Add new</label> {//TS Error, invalid prop forHtml}
          <input type="text" id="input" />
          <button type="submit">Add</button>
        </div>
      </form>
      <article className="someData">
        {data.map((item: Data, i: number) => {
          return (
            <div key={i} className="box">
              <h2>{item.title}</h2>{ // TS Error no title in data}
            </div>
          );
        })}
      </article>
    </section>
  );
};

export default App;

接口数据{
id：字符串；
查询：字符串；
}
常量应用程序：React.FC=（）=>{
const[data，setData]=useState（[]）；
const[query，setQuery]=useState（“”）；
const handleSubmit=（e:React.FormEvent）：void=>{
e、 预防默认值（）；
如果（查询）{
const newItem:Data={id:new Date（）.getTime（）.toString（），query}；
setData（[…数据，newItem]）；
}
};
返回(
添加新{//TS错误，无效的prop forHtml}
添加
{data.map（（项目：数据，i:number）=>{
返回(
{item.title}{//TS错误数据中没有标题}
);
})}
);
};
导出默认应用程序；

setList（[…data，newItem]）；应该是setData（[…data，newItem]）；您能告诉我们如何使用Typescript吗？这样更容易解释错误所在