Как решить проблему с typescript в nuxt3?

Question

[Сергей Бурдужа]

Всем привет.
Не могу понять, как решить проблему с typescript.
Как использовать interface и value?

<script lang="ts" setup>
import { ref } from "vue";
import { useAsyncData } from "nuxt/app";
import HomeIntro from "../components/home/HomeIntro.vue";
import { I_Home } from "../interface/I_Home";

const home = ref<I_Home | null>(null);
await useAsyncData("home", () =>
  $fetch(`http://bs-bunavestire.local/wp-json/home/v1/all`)
).then((res) => {
  if (res.data) {
    home.value = res.data;
  }
})
</script>
<template>
  <div class='home'>
    <HomeIntro v-if="home.value.home_intro && home.value.home_intro.image"
               :image="home.value.home_intro.image" />
  </div>
</template>
<style lang="scss" scoped></style>

Ошибка у этой строчке
home.value = res.data

Property 'home_intro' is missing in type 'Ref<unknown>' but required in type '{ home_intro: { image: string; }; }'.

Заранее благодарен.

Comments

[Алексей Ярков]

А так?

const { data } = await useAsyncData<I_Home | null>("home", () => $fetch(`http://bs-bunavestire.local/wp-json/home/v1/all`);

if (data) {
  home.value = data;
}

[Сергей Бурдужа]

Алексей Ярков, Если бы можно было бы совсем без ошибок?

[Сергей Бурдужа]

Алексей Ярков, Кароче получилось так, методом тыка.
Я понимаю, что лучше выкладывать код а не скрин, но на скрине видны волнистые линии и ошибки.

Answer 1

[Taulan Khatuaev]

необходимо указать тип данных res.data, который должен соответствовать интерфейсу I_Home
home.value = res.data as I_Home;

<HomeIntro v-if="home.value && home.value.home_intro && home.value.home_intro.image"
           :image="home.value.home_intro.image" />

Comments

[Сергей Бурдужа]

Не хочет. Я уже и раньше пробывал.

[WbICHA]

useAsyncData — дженерик. Почему бы его нормально не типизировать через него? Зачем здесь ассерт?

[Aetae]

Сергей Бурдужа, тебе же английским языком пишет в чём пробема. В data лежит Ref на тип, а ты присваиваешь сам тип.
Т.е. home.value = res.data.value as I_Home; должно сработать. Однако непонятно нахера там у них реф, с nuxt дела не имел, возможно в этом скрыт какой-то великий смысл, и надо что-то иное мутить...