T
TanStack•3y ago
conscious-sapphire

Typing issue in template in Intellij Webstorm

Hi, is anyone here using webstorm? I'm getting some wonky typing in the templates (whereas in the script block the types are correct). VS Code works fine, and I've already submitted a Webstorm bug but just wondering if anyone has run into this and knows a workaround. Vue 2.7/3 TS 4.7/4.9 @tanstack/vue-query 4.20.5 
<script lang="ts" setup>
import { useQuery } from '@tanstack/vue-query'

const { isLoading, data } = useQuery({
  queryKey: ['destructured assignment'],
  queryFn: () => Promise.resolve<number>(1)
})

isLoading; // TS: Ref(false) | Ref(true)
data; // TS: Ref(number) | Ref(undefined)
</script>

<template>
  <div>
    {{ isLoading }} <!-- TS: any -->
    {{ data }} <!-- TS: any -->
  </div>
</template>
<script lang="ts" setup>
import { useQuery } from '@tanstack/vue-query'

const { isLoading, data } = useQuery({
  queryKey: ['destructured assignment'],
  queryFn: () => Promise.resolve<number>(1)
})

isLoading; // TS: Ref(false) | Ref(true)
data; // TS: Ref(number) | Ref(undefined)
</script>

<template>
  <div>
    {{ isLoading }} <!-- TS: any -->
    {{ data }} <!-- TS: any -->
  </div>
</template>
2 Replies
multiple-amethyst
multiple-amethyst•3y ago
I believe you need some kind of addon to get that working ( ex Volar for vscode). Typescript by default does not understand template syntax.
conscious-sapphire
conscious-sapphireOP•3y ago
Unfortunately it's not the case. Webstorm has had type assistance in templates out of the box for a long time. But their composition api support is kinda new, and it doesn't seem to like something about UseQueryReturnType 🤷‍♂️ Thanks for the reply anyway! @MrMentor I'll just wait for them to fix the bug

Did you find this page helpful?