Nuxt•3w ago

TS false property not exists message (TS not detecting type in template)

Hey folks ts says the category_name attr does not exist...in fact in the template the inferrence is not working. Has anyone come across a similar issue and a fix? Saw some discussion on ts issues but no fix I could come across yet.

6 Replies

kapa.ai•3w ago

Hi @Dark_Mift. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, it appears that you're encountering a TypeScript issue related to type inference in Vue templates within a Nuxt project. This is a known issue that can occur in certain situations. Here are a few potential solutions and considerations: 1. Ensure you have the lang="ts" attribute on your <script> tag: As mentioned in this Stack Overflow post (https://stackoverflow.com/questions/78004968), forgetting to add the lang="ts" attribute to the <script> tag can cause TypeScript errors in Vue Single File Components (SFCs). Make sure your component looks like this:

<script setup lang="ts">
// Your TypeScript code here
</script>

<script setup lang="ts">
// Your TypeScript code here
</script>

2. Check your TypeScript configuration: Make sure your tsconfig.json is properly set up. Nuxt generates a .nuxt/tsconfig.json file that you should extend in your project's tsconfig.json. Your configuration should look something like this:

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    // Your additional options here
  }
}

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    // Your additional options here
  }
}

3. Verify your Nuxt TypeScript settings: In your nuxt.config.ts file, ensure that TypeScript support is enabled:

export default defineNuxtConfig({
  typescript: {
    strict: true
  }
})

export default defineNuxtConfig({
  typescript: {
    strict: true
  }
})

4. Use type casting in the template: If the issue persists, you can try explicitly casting the type in your template. However, this is not ideal and should be a last resort:

<template>
  <div>{{ (category as { category_name: string }).category_name }}</div>
</template>

<template>
  <div>{{ (category as { category_name: string }).category_name }}</div>
</template>

5. Check for Volar extension and Takeover mode: Ensure you have the Volar extension (https://marketplace.visualstudio.com/items?itemName=Vue.volar) installed in VS Code and that Takeover mode is enabled for better Vue 3 and TypeScript support. If none of these solutions work, it's possible that there might be a bug or limitation in the current version of Nuxt or its TypeScript integration. In that case, you may want to check the Nuxt GitHub issues (https://github.com/nuxt/nuxt/issues) for any related problems or consider opening a new issue with a minimal reproduction of your problem. Remember to always use the latest stable versions of Nuxt, TypeScript, and related dependencies to ensure you have the most up-to-date type support and bug fixes. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@210492019540361216> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Dark_MiftOP•3w ago

this did not reolve my issue

Quantix•3w ago

can you show the template and the signature for the ProductData type

Orbis•3w ago

Seems like ProductData itself is an array type.

Quantix•3w ago

i'm assuming that he's looping through the array on line 6 of the template and the category variable he gets out is the individual ProductData type which is also an array of the type he actually wants which contains the category_name

Gaming

Programming

TS false property not exists message (TS not detecting type in template)

Did you find this page helpful?