从哪里导入 Firebase 存储项目的类型参考 - React Typescript？答案

【问题标题】：From where to import type Reference for Firebase storage items in - React Typescript?从哪里导入 Firebase 存储项目的类型参考 - React Typescript？
【发布时间】：2020-11-26 10:57:57
【问题描述】：

我想从 Firebase 存储中获取项目并将它们设置为状态。我可以从哪里导入 IDE 推荐我使用的类型“参考”？

const ListOfFiles: React.FC = () => {
  // Using "react-redux-firebase"
  const firebase = useFirebase()

  // My question is concerning about what type to put here and where to take it from
  const [items, setItems] = React.useState<Reference[]>([])

  const getFiles = React.useCallback(async () => {
    const filesPath = `path/to/my/files`
    const storageRef = firebase.storage().ref(filesPath)
    const result = await storageRef.listAll()

    setItems(result.items)
  }, [firebase, itemId, workspaceId])

  React.useEffect(() => {
    getFiles()
  }, [getFiles, itemId, workspaceId])

  return items.map((item) => <span>{item.name}</span>
}

【问题讨论】：

标签： reactjs typescript firebase types firebase-storage

【解决方案1】：

你应该把items的类型放在那里

type Item = {
  name: string
  .. other fields ...
}

... 

const [items, setItems] = React.useState<Item[]>([])

... 

setItems(result.items as Item[]) // You need to cast your content to Items, because typescript doesn't know what result.items is

如果你想知道为什么你的 IDE 推荐你 Reference，那是因为 typescript 试图自动理解你的状态钩子的类型。它注意到你在这里使用setItems：

setItems(result.items)

它知道 result.items 是 Reference[] 类型，其中 Reference 是 Firebase 返回的泛型类型（它不知道您的数据形式，因此无法返回更具体的类型）。所以 typescript（和你的 IDE）建议你：

嘿，您缺少items 和setItems 的类型。考虑到您在代码的下方为它们分配了一个 Reference[] 对象，您可能希望它作为您的类型。

事实是，您知道商品的实际属性，因此您可以通过提供特定类型来提供更详细的信息

【讨论】：