В чем ошибка описания типов?

Question

делаю сейчас для себя небольшой пет-проект: юзер вводит блюдо и ему через Апи приходит рецепт. Решил использовать тайпскрипт, делаю запрос на сервер используя аксиос и описываю тип данных но все-равно потом получаю не то что нужно.

Пример кода:

const [query, setQuery] = React.useState<string>('steak');
  const[recipes, setRecipes] = React.useState<IfetchApi[]>([]);

  async function fetchApi(){
    try{
      const response = await axios.get<IfetchApi[]>(`https://api.edamam.com/search?q=${query}&app_id=${ID}&app_key=${KEY}`);
      setRecipes(response.data);
      console.log(response.data)
    }catch(e: unknown){
      console.warn(e);
    }
  }

  React.useEffect(()=> {
    fetchApi()
  }, [query]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

в переменной recipes приходит обьект: Разворачиваю в картинках постепенно:

Интерфейс к обьекту я описал так:

export interface IfetchApi{
    config?: any,
    headers?:any,
    data: Idata[],
    request?: number,
    statusText?: string

}

export interface Idata {
    count: number,
    from: number,
    hits: Ireciepe[],
    more: boolean,
    q: string,
}
export interface Ireciepe{
    calories: number,
    cautions?: any,
    cuisineType: Array<string>,
    dietLabels: Array<string>,
    dishType?: any,
    healthLabels?: any,
    image: string,
    ingredientLines: Array<string>,
    ingredients: Iingredients[]
    label: string,
    mealType: Array<string>,
    shareAs: string,
    source: string,
    totalDaily?: any,
    totalNutrients?: any,
    totalTime: number,
    totalWeight: number,
    uri: string,
    url: string,
    yield: number
}

export interface Iingredients{
    text: string,
    quantity: number,
    measure: string
}

Мой вопрос в том почему я потом не могу вывести данные из обьекта, к примеру {recipes.hits.calories} - выдает ошибку "Property 'hits' does not exist on type 'IfetchApi[]'". Я так понимаю что я допустил ошибку в описании типов или как ?

БЛОГ НА HUSL

В чем ошибка описания типов?

Ответы (0 шт):