Nuxt•2mo ago

No Type Hints

I was under the impression that Nuxt supported types everywhere. But in this simple ./app.vue

<script setup lang="ts">
const count = ref<number>(0);
const increment = () => count.value++;
</script>

<template>
  <div>
    <span>count is {{ count }}</span>
    <button v-on:click="increment()">+</button>
  </div>
</template>

<script setup lang="ts">
const count = ref<number>(0);
const increment = () => count.value++;
</script>

<template>
  <div>
    <span>count is {{ count }}</span>
    <button v-on:click="increment()">+</button>
  </div>
</template>

I dont get any type hints for the count variable, nor the increment function within the code block, and I do not get any errors when writing invalid typescript code before execution. I have the Vue - Official vs code extension installed.

------------------------------
- Operating System: Windows_NT
- Node Version:     v20.5.0
- Nuxt Version:     3.12.4
- CLI Version:      3.12.0
- Nitro Version:    2.9.7
- Package Manager:  npm@9.8.0
- Builder:          -
- User Config:      compatibilityDate, typescript, devtools, modules
- Runtime Modules:  nuxt-typed-router@3.6.5
- Build Modules:    -
------------------------------

------------------------------
- Operating System: Windows_NT
- Node Version:     v20.5.0
- Nuxt Version:     3.12.4
- CLI Version:      3.12.0
- Nitro Version:    2.9.7
- Package Manager:  npm@9.8.0
- Builder:          -
- User Config:      compatibilityDate, typescript, devtools, modules
- Runtime Modules:  nuxt-typed-router@3.6.5
- Build Modules:    -
------------------------------

If this is expected behavior, please tell me. Thank you.

Solution:

Restart vscode? Sometimes, for whatever reason, typescript intellisense just stops working. A simple reload usually fixes it.

Jump to solution

8 Replies

Ripwords•2mo ago

The first issue is that Number is not the same as number, the type should be number. The second thing is that the type is automatically inferred:

const count = ref(0)
console.log(count.value)

const count = ref(0)
console.log(count.value)

Ripwords•2mo ago

you can apply custom types as well, just that in this case Number should be converted to number also make sure your Vue extension is updated properly, VScode currently has a bug that prevents a specific older version of the Vue extension from updating to latest

Ripwords•2mo ago

SharpieMaster•2mo ago

Yea it gave me an error when I ran, but I didn’t get it here or the (property) Ref<number>.value: number How do I update it properly? Just re install?

SharpieMaster•2mo ago

literally nothing

SharpieMaster•2mo ago

I am on v2.0.28

Solution

Cue•2mo ago

Restart vscode? Sometimes, for whatever reason, typescript intellisense just stops working. A simple reload usually fixes it.

SharpieMaster•2mo ago

I swear I tried that before and it didnt work thank you so much

Gaming

Programming

No Type Hints