Как типизирова redux thunk?

Question

[Юрий Иванов]

Добрый день, помогите пожалуйста разобраться что я не так делаю
Есть запрос, возвращается дата, в дате все поля которые описаны в интерфейсе, при попытки обратиться к полю даты (пример в консоле data.name) получаю ошибку
Не понимаю где я делаю ошибку
Property 'name' does not exist on type 'IHero[]'

export const fetchHeroPage = createAsyncThunk(
  'heroPage/fetchHeroPage',
  async ({ url }: { url: string }) => {
    const { data } = await axios.get<IHero[]>(url)
    console.log(data.name)
    return data
  }
)

const initialState: IHeroPageArray = {
  heroPageArray: [],
  status: 'loading',
}

export interface IHero {
  affiliation: string
  birthday: string
  constellation: string
  description: string
  name: string
  nation: string
  rarity: number
  vision: string
  weapon: string
  weapon_type: string
  id: string
  region: string
  type: string
  family: string
  faction: string
  ascensionMaterial: string
  baseAttack: number
  location: string
  passiveDesc: string
  passiveName: string
  subStat: string
}

export interface IHeroPageArray {
  heroPageArray: IHero[]
  status: 'loading' | 'success' | 'error'
}

Comments

[Алексей Абрамов]

У тебя ж промис

axios.get<IHero[]>(url).then(({data})=>console.log(data))

Answer 1

[Квазиморд Сидорович]

Ну ты такой говоришь axios - хочу получить массив из объектов IHero[], а потом у этого массива ищешь свойство name... А его тама нету! А вот так должно быть, у первого элемента
console.log(data[0].name)

Comments

[Юрий Иванов]

а каким образом можно обращаться к полям массива напрямую, data.name, ибо я же не буду считать какой по счету элемент мне надо получить и в коде выглядит не красиво
я блин реально не могу дойти до этого сам. В моем понимании я говорю, что я ожидаю массив и в массиве будут объекты следующих типов, почему я потом на прямую не могу к ним обращаться, если в консоль логе в массиве они содержаться
(

[Квазиморд Сидорович]

Юрий Иванов, что выводит в консоль этот код? (убрал деструктуризацию)

const  data  = await axios.get<IHero[]>(url)
    console.log(JSON.stringify(data, null, 2))

увидишь структуру от неё и пляши.