类型'y'上不存在类型为:属性:的Nuxt.js

原学程将引见典型&#三九;y&#三九;上没有存留典型为:属性:的Nuxt.js的处置办法,这篇学程是从其余处所瞅到的,而后减了1些海外法式员的疑问与解问,愿望能对于您有所赞助,佳了,上面开端进修吧。

类型'y'上不存在类型为:属性:的Nuxt.js 教程 第1张

成绩描写

我是Vue以及Nuxt的老手。今朝正在用挨字稿做学程。它向我扔出了1堆毛病,Property 'x' does not exist on type 'y'.上面是1个例子;

ERROR in components/AboutMe.vue:五六:二七
TS二三三九: 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; }'.
 五四 |},
 五五 |mounted() {
  > 五六 |  this.showTitle = this.routes.every((r) => this.$route.name !== r)
 |^^^^^^
 五七 |  if (this.$route.name === `users-userSlug`) {
 五8 | this.expand = true
 五九 | 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(v二.一四.六)


编纂一:答复@BoussadjraBrahim

感谢,我添减了Vue.extend({}),如今年夜多半毛病皆消逝了。但是个中1些依然存留。

ERROR in components/Description.vue:一三8:一0
TS二三三九: Property 'showAboutUs' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<{ post: any; }>>'.
 一三六 |},
 一三七 |mounted() {
  > 一三8 |  this.showAboutUs = this.$route.name !== `users-userSlug-posts`
  | ^^^^^^^^^^^
 一三九 |},
 一四0 |methods: {
 一四一 |  open() {

ERROR in components/Description.vue:一四二:一二
TS二三三九: Property 'isOpen' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<{ post: any; }>>'.
 一四0 |methods: {
 一四一 |  open() {
  > 一四二 | this.isOpen = true
  |^^^^^^
 一四三 |  },
 一四四 |  close() {
 一四五 | 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
 },
  },
})

推举谜底

若要夺取典型揣摸,应应用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: ``,
 }
  },

佳了闭于典型&#三九;y&#三九;上没有存留典型为:属性:的Nuxt.js的学程便到这里便停止了,愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野,更多技巧学程不妨在站内搜刮。