Откуда импортировать ссылку на тип для элементов хранилища Firebase в - React Typescript?

Question

Я хочу получить элементы из хранилища 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>
}

Answer 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, то это потому, что машинописный текст пытался автоматически понять тип ваших обработчиков состояния. Он заметил, что вы используете здесь setItems:

setItems(result.items)

, и он знает, что result.items имеет тип Reference[], где Reference - это общий тип c, возвращаемый Firebase (который не знать форму ваших данных, поэтому не может вернуть более конкретный тип c). Итак, машинописный текст (и ваша IDE) предлагает вам:

Эй, вам не хватает типов items и setItems. Учитывая, что далее по вашему коду вы назначаете им объект Reference[], вы, вероятно, захотите, чтобы это было вашим типом.

Дело в том, что вы знаете фактические свойства ваших элементов , поэтому вы можете предоставить более подробную информацию, указав c тип