javascript - Nuxt.js와 TypeScript: 타입 'y'에 'x' 속성이 존재하지 않습니다

저는 Vue와 Nuxt를 처음 접합니다. 현재 TypeScript로 튜토리얼을 진행하고 있습니다. Property 'x' does not exist on type 'y'.라는 여러 오류가 발생합니다. 아래는 예시입니다;

ERROR in components/AboutMe.vue:56:27
TS2339: Property 'routes' does not exist on type '{ components: { CButton: any; }; props: { user: { type: ObjectConstructor; default: undefined; }; }; data(): { expand: boolean; showTitle: boolean; showReadMore: boolean; routes: string[]; compiledBio: 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

다른 것들은 Property 'showTitle' does not exist, 'expand' 등입니다. 기본적으로 this.가 붙은 모든 것은 오류를 발생시킵니다.

이것은 AboutMe.vue 컴포넌트의 <script 블록입니다.

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

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

내가 무엇을 잘못하고 있나요?

저는 nuxt.js (v2.14.6)을 사용하고 있습니다

@BoussadjraBrahim을 위한 편집 1

나는 Vue.extend({})를 추가했고 이제 대부분의 오류는 사라졌다. 하지만 일부는 여전히 존재한다.

ERROR in components/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 components/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
    },
  },
})

답변 #1

타입 추론을 얻으려면 Vue.extend({})를 사용하여 컴포넌트를 생성해야 합니다 :

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

import  Vue from "vue"

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

구성 요소 타이핑을 강제하기 위해 데이터 속성에 타입을 지정하는 것을 권장합니다 :

 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,
      compiledBio: ``,
    }
  },

답변 #2

Vue.extend({})를 사용해 보세요

예시 :

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

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

이것이 당신에게 도움이 되길 바랩니다