VSCode showing error, but code works fine for type error

[hearty wyvern]

Hi all!
I have this error showing on this script:

<script setup lang="ts">
const { data: rsp } = await useFetch('https://api.weather.gov/gridpoints/TBW/99,103/forecast/hourly')
</script>

<template>
  <div>
    <li v-for="period in rsp['properties']['periods']">
      {{period.temperature}}{{ period.temperatureUnit }}
    </li>
  </div>
</template>

The code still runs fine. I googled this a bit and it seems it's somethign related to the property not having a defined type, but I'm not entirely sure how to fix it or how to change it.

[rain zephyr]

interesting. i just tested this. not getting the error you're getting

it's probably a warning from ur linter

[hearty wyvern]

yeah haha it threw me for a loop (no pun intended). I will see if I can find which linter is doing it

Volar maybe?

[proud matrix]

Did you enable the Takeover Mode or TypeScript Vue Plugin?

[hearty wyvern]

Just did, still there

I disabled the builtin typescript one, and I have this one

[rain zephyr]

what's ur IDE?

vscode?

[hearty wyvern]

VSCode

[rain zephyr]

😅 ah ok. i can't remember... i use nvim

look at this beauty

does this api have a documentation page, i wanna check something

found it

[rain zephyr]

btw you need a :key when you run v-for

you should be getting a warning on that too

so edit line number 9 to read:

<li v-for="(period, index) in rsp['properties']['periods']" :key="index">

this fixes the :key issue

but not the unknown

[hearty wyvern]

I noticed that when I switched lang in the script setup to NOT Ts all the errors went away

[rain zephyr]

yes it's a type issue

obviously

just not sure how we should type data

🤔

there used to be a library for that, but its no longer maintained https://www.npmjs.com/package/@paxperscientiam/national-weather-service-api.ts

[hearty wyvern]

yeah I tried a couple more things with no success, my setup isn't really that advanced, no idea why it's complaining

[rain zephyr]

yeah . it's challenging

[rain zephyr]

ok i think i got it

😂

[hearty wyvern]

ooh??

[rain zephyr]

yes

so i created a types file

wait

the code should now look like this:

<script setup lang="ts">
import type { GridpointForecast } from "../weatherType.d.ts";
const { data: rsp } = await useFetch<GridpointForecast>(
  "https://api.weather.gov/gridpoints/TBW/99,103/forecast/hourly",
);
console.log(rsp);
</script>

<template>
  <div v-if="rsp">
    <li v-for="(period, index) in rsp['properties']['periods']" :key="index">
      {{ period.temperature }}{{ period.temperatureUnit }}
    </li>
  </div>
</template>

i used this generator to create the types file from the OPENAPI spec file:
https://github.com/horiuchi/dtsgenerator

:w

[hearty wyvern]

Ah so we are basically assigning a type to those fields so they are not "any"?

[rain zephyr]

yes

to the data response object

[hearty wyvern]

it makes sense. I am very very very new to typescript but it seems odd that it's so against the "any" datatype

[rain zephyr]

and assigning it to the response from the useFetch

i hate typescript too

and not very comfortable with it

keep having to go back and look at my notes

more like "stare"

[hearty wyvern]

When using Nuxt it's what is recommended though right?

[rain zephyr]

yes . nothing stops you from using js actually but debugging on large projects becomes a hustle

[hearty wyvern]

gotcha

[rain zephyr]

so TS, that way you'll force yourself to lvoe it 😂

[hearty wyvern]

Thank you for your help my friend 🙂

[rain zephyr]

btw this apparently also works:

const { data: rsp } = await useFetch<any | null>(

it's not recommended but if you explicitely type it as any, its fine with it

[hearty wyvern]

that one doesn't make the error go away for me

<script setup lang="ts">
// Fetch data from api and store it in rsp
const { data: rsp } = await useFetch<any | null>('https://api.weather.gov/gridpoints/TBW/99,103/forecast/hourly')

function formatAMPM(datetime: any) {
  var time = new Date(datetime);
  return time.toLocaleString('en-US', { hour: 'numeric', hour12: true }
  );
}

</script>

<template>
  <div>
    <weatherCard />
    <li v-for="(period, index) in rsp['properties']['periods']" :key="index" class="list-none">
      <weatherCard :temp="period.temperature" :forecast="period.shortForecast" :unit="period.temperatureUnit"
        :hour="formatAMPM(period.startTime)" />
    </li>
  </div>
</template>

[rain zephyr]

which one works?

any| null or GridpointForecast?

[hearty wyvern]

neither right now - it's complaining about the import for me (I put the file you sent on my root directory)

[rain zephyr]

huh

mmm it's a type alias not an interface. one second

[rain zephyr]

ok try this one instead. i think there was some sort of conflict in ES versions from the generator i used.

This is the new types file. I've placed it under types dir. types is a child of my project root directory in this case

your updated code:

<script setup lang="ts">
import type { GridpointForecastGeoJson } from "../types/";
const { data: rsp } = await useFetch<GridpointForecastGeoJson>(
  "https://api.weather.gov/gridpoints/TBW/99,103/forecast/hourly",
);
console.log(rsp);
</script>

<template>
  <div v-if="rsp">
    <li v-for="(period, index) in rsp['properties']['periods']" :key="index">
      {{ period.temperature }}{{ period.temperatureUnit }}
    </li>
  </div>
</template>

i placed the types file under the types directory in this case (fix your import path according to your structure)

[proud matrix]

TypeScript is like a girlfriend who is always complaining

[hearty wyvern]

I'm starting to believe this more and more

I'm convinced that (much like my ex) it just wants to complain