Nuxt.js 与 TypeScript:属性“x”在类型“y”上不存在
2020-12-09
9924
我是 Vue 和 Nuxt 的新手。目前正在使用 TypeScript 进行教程。它向我抛出了一堆错误
属性“x”在类型“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
其他是
属性“showTitle”不存在
,
'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
},
},
})
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,
},
},
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: ``,
}
},
Boussadjra Brahim
2020-12-09
尝试使用
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>
希望这对您有所帮助
rize
2022-03-14