javascript - 如何修复接口和类型？

Question

我尝试编写组件，它应该从 api 获取具有不同变量名的数据并渲染 ut。我有两个具有相同数据但具有不同变量名称的响应，例如：

FirstReq {
    id          number
    published   boolean
    publishDate string
    newsImage   string
    newsTitle   string
}

SecondReq {
    archived     boolean
    id           number
    artImage     string
    postingDate  string
    articleTitle string
}

获得数据后，我尝试将具有不同变量名称的接收数据分配给统一对象，但认为我做错了并且出现了 TS 错误。组件代码：

interface ItemInterface {
  id: number,
  title: string,
  date?: string,
  image?: string,
}

type Item = ItemInterface[]

const Items: React.FC = () => {
  const [itemsData, setItems] = useState<Item>()

  useEffect(() => {
    Http.get<Item>(url).then((res: Item) => setListItems(res))
  }, [])

  if (typeof (itemsData) !== 'undefined') {
    const unifiedItem: Item = {
      id: itemsData.id, // TS error -  TS2339: Property 'id' does not exist on type 'Item'
      title: itemsData.newsTitle || itemsData.articleTitle, // same ERR
      date: itemsData.publishDate || itemsData.postingDate,
      image: itemsData.newsImage || itemsData.artImage,
    }
  }

  const itemsList = () => {
    if (typeof (itemsData) !== 'undefined') {
      return unifiedItem.map((item:{
        id:number, title:string, image?:string
      }) => {
        return (
          <li key={item.id}>
            <ItemPreview item={item} />
          </li>
        );
      })
    }
    return (
      <div></div>
    )
  }

  return (
      <ul>
        {itemsList()}
      </ul>
  )
}

export default Items

主要问题是如何将接收到的数据分配给统一对象“unifiedItem”？

标签： javascriptreactjstypescript

Answer 1

您的类型Item被定义为一个ItemInterface数组。您无法从整个数组中检索 id，您必须指定索引才能检索ItemInterface类型化元素。

例如：itemsData[0].id不应该抛出任何错误！