javascript - Nuxt.js with TypeScript: Property 'x' does not exist on type 'y' - Stack Overflow

admin管理员组

文章数量:1340292

I am new to Vue and Nuxt. Doing a tutorial with TypeScript currently. It throws me a bunch of errors of Property 'x' does not exist on type 'y'. An example below;

ERROR in ponents/AboutMe.vue:56:27
TS2339: Property 'routes' does not exist on type '{ ponents: { CButton: any; }; props: { user: { type: ObjectConstructor; default: undefined; }; }; data(): { expand: boolean; showTitle: boolean; showReadMore: boolean; routes: string[]; piledBio: string; }; beforeMount(): void; mounted(): void; }'.
    54 |   },
    55 |   mounted() {
  > 56 |     this.showTitle = this.routes.every((r) => this.$route.name !== r)
       |                           ^^^^^^
    57 |     if (this.$route.name === `users-userSlug`) {
    58 |       this.expand = true
    59 |       this.showReadMore = false

Others are Property 'showTitle' does not exist, 'expand' and etc. Basically everything with this. throws errors.

This is the <script block of AboutMe.vue ponent.

<script lang="ts">
import { CButton } from '@chakra-ui/vue'

export default {
  ponents: {
    CButton,
  },
  props: {
    user: {
      type: Object,
      default: undefined,
    },
  },
  data() {
    return {
      expand: false,
      showTitle: false,
      showReadMore: true,
      routes: [`users-userSlug-posts`, `users-userSlug`],
      piledBio: ``,
    }
  },
  mounted() {
    this.showTitle = this.routes.every((r) => this.$route.name !== r)
    if (this.$route.name === `users-userSlug`) {
      this.expand = true
      this.showReadMore = false
    }
  },
}
</script>

What I am doing wrong?

I am using nuxt.js (v2.14.6)

Edit 1 for @BoussadjraBrahim

I added Vue.extend({}) and now most errors go away. But some of them still exist.

ERROR in ponents/Description.vue:138:10
TS2339: Property 'showAboutUs' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<{ post: any; }>>'.
    136 |   },
    137 |   mounted() {
  > 138 |     this.showAboutUs = this.$route.name !== `users-userSlug-posts`
        |          ^^^^^^^^^^^
    139 |   },
    140 |   methods: {
    141 |     open() {

ERROR in ponents/Description.vue:142:12
TS2339: Property 'isOpen' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<{ post: any; }>>'.
    140 |   methods: {
    141 |     open() {
  > 142 |       this.isOpen = true
        |            ^^^^^^
    143 |     },
    144 |     close() {
    145 |       this.isOpen = false

export default Vue.extend({
  data() {
    const showAboutUs: Boolean = false
    const isOpen: Boolean = false

    return {
      showAboutUs,
      isOpen,
    }
  },
  mounted() {
    this.showAboutUs = this.$route.name !== `users-userSlug-posts`
  },
  methods: {
    open() {
      this.isOpen = true
    },
    close() {
      this.isOpen = false
    },
  },
})

I am new to Vue and Nuxt. Doing a tutorial with TypeScript currently. It throws me a bunch of errors of Property 'x' does not exist on type 'y'. An example below;

ERROR in ponents/AboutMe.vue:56:27
TS2339: Property 'routes' does not exist on type '{ ponents: { CButton: any; }; props: { user: { type: ObjectConstructor; default: undefined; }; }; data(): { expand: boolean; showTitle: boolean; showReadMore: boolean; routes: string[]; piledBio: string; }; beforeMount(): void; mounted(): void; }'.
    54 |   },
    55 |   mounted() {
  > 56 |     this.showTitle = this.routes.every((r) => this.$route.name !== r)
       |                           ^^^^^^
    57 |     if (this.$route.name === `users-userSlug`) {
    58 |       this.expand = true
    59 |       this.showReadMore = false

Others are Property 'showTitle' does not exist, 'expand' and etc. Basically everything with this. throws errors.

This is the <script block of AboutMe.vue ponent.

<script lang="ts">
import { CButton } from '@chakra-ui/vue'

export default {
  ponents: {
    CButton,
  },
  props: {
    user: {
      type: Object,
      default: undefined,
    },
  },
  data() {
    return {
      expand: false,
      showTitle: false,
      showReadMore: true,
      routes: [`users-userSlug-posts`, `users-userSlug`],
      piledBio: ``,
    }
  },
  mounted() {
    this.showTitle = this.routes.every((r) => this.$route.name !== r)
    if (this.$route.name === `users-userSlug`) {
      this.expand = true
      this.showReadMore = false
    }
  },
}
</script>

What I am doing wrong?

I am using nuxt.js (v2.14.6)

Edit 1 for @BoussadjraBrahim

I added Vue.extend({}) and now most errors go away. But some of them still exist.

ERROR in ponents/Description.vue:138:10
TS2339: Property 'showAboutUs' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<{ post: any; }>>'.
    136 |   },
    137 |   mounted() {
  > 138 |     this.showAboutUs = this.$route.name !== `users-userSlug-posts`
        |          ^^^^^^^^^^^
    139 |   },
    140 |   methods: {
    141 |     open() {

ERROR in ponents/Description.vue:142:12
TS2339: Property 'isOpen' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<{ post: any; }>>'.
    140 |   methods: {
    141 |     open() {
  > 142 |       this.isOpen = true
        |            ^^^^^^
    143 |     },
    144 |     close() {
    145 |       this.isOpen = false

export default Vue.extend({
  data() {
    const showAboutUs: Boolean = false
    const isOpen: Boolean = false

    return {
      showAboutUs,
      isOpen,
    }
  },
  mounted() {
    this.showAboutUs = this.$route.name !== `users-userSlug-posts`
  },
  methods: {
    open() {
      this.isOpen = true
    },
    close() {
      this.isOpen = false
    },
  },
})

• javascript
• typescript
• vue.js
• nuxt.js

Share Improve this question Follow edited May 28, 2023 at 10:34 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Dec 9, 2020 at 17:08 SwixSwix 2,1231111 gold badges3838 silver badges5858 bronze badges 3

• That means that this doesn't have "routes". You're embedding routes into the return of the data method. You're going to have to add them as a property on the AboutMe.vue ponent if you want to access them as this.routes. Alternately, you could do this.data().routes – Charlie Bamford Commented Dec 9, 2020 at 17:16
• How do I add them as property? – Swix Commented Dec 9, 2020 at 17:22
• It looks like you are using things on the Vue ponent type. You need to tell typescript that this object is a vue ponent. I don't know Vue, so I can't really help you with that. – Charlie Bamford Commented Dec 9, 2020 at 17:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

To get types inference you should create the ponent using Vue.extend({}) :

<script lang="ts">
import { CButton } from '@chakra-ui/vue'

import  Vue from "vue"

export default Vue.extend({
  ponents: {
    CButton,
  },
  props: {
    user: {
      type: Object,
      default: undefined,
    },
  },
  data() {
    return {
      expand: false,
      showTitle: false,
      showReadMore: true,
      routes: [`users-userSlug-posts`, `users-userSlug`],
      piledBio: ``,
    }
  },
  mounted() {
    this.showTitle = this.routes.every((r) => this.$route.name !== r)
    if (this.$route.name === `users-userSlug`) {
      this.expand = true
      this.showReadMore = false
    }
  },
})
</script>

I remend to type your data properties to enforce the ponent typing :

 data() {
    const routes:Array<string>: [`users-userSlug-posts`, `users-userSlug`];
  // do the same thing with the other properties
    return {
      expand: false,
      showTitle: false,
      showReadMore: true,
      routes,
      piledBio: ``,
    }
  },

Try to use Vue.extend({})

Example:

<script lang="ts">
import { CButton } from '@chakra-ui/vue'
import  Vue from "vue"

export default Vue.extend({
  ponents: {
    CButton,
  },
  props: {
    user: {
      type: Object,
      default: undefined,
    },
  },
...
</script>

Hopefully this helps you

本文标签： javascriptNuxtjs with TypeScript Property 39x39 does not exist on type 39y39Stack Overflow