typescript - Specificera returtyp med useFetch från vueuse-biblioteket

Jag försöker specificera returtypen för mina data med funktionen useFetch() från vueuse-biblioteket (inte den från Nuxt3!)

Koden nedan fungerar för att hämta data från API:et men datatypen för datan (person) härleds inte korrekt.

<script setup lang="ts">
import { useFetch } from '@vueuse/core'

interface Person {
  id: number
  first_name: string
  last_name: string
}

const url = 'http://localhost:8000/api/persons/1/'

const { isFetching, data: person } = useFetch<Person>(url).get().json()

console.log(person)
</script>

<template>
  <div>
    <div v-if="isFetching">
      <LoadingIndicator />
    </div>
    <div v-else>
      <div v-if="person">
          {{ person.id }}: {{ person.first_name }} {{ person.last_name }}
      </div>
    </div>
  </div>
</template>

Som du kan se nedan förblir datatypen av typen Any. (Jag håller muspekaren över datavärdet):

Konsolloggen:

Om jag hoppar över anropet till json(), då härleds typen korrekt och jag har kodkomplettering i mallen. Objektet parsas dock inte längre som json...

Konsolloggen: Någon idé om hur man får typen att härledas korrekt? Eller är detta bara ett problem med mitt IDE?

Relaterade artiklar