Vue3/typescript访问属性

Question

我试图在Vue3应用程序中包含一个动态路由组件，使用axios连接到Django API，但却出现了以下错误。我正在使用Vite.dev。我遵循文档使用create方法，但我有点迷失在文档和示例中。

第一个错误：

src/views/Page.vue:27:11 - error TS2339: Property 'page' does not exist on type '{ getPage(pageSlug: any): Promise<void>; }'.
27      this.page = response.data
~~~
src/views/Page.vue:35:14 - error TS2339: Property 'getPage' does not exist on type '{ name: string; components: { PageComponent: { props: string[]; }; }; data(): { page: {}; }; methods: { getPage(pageSlug: any): Promise<void>; }; created(): Promise<void>; }'.
35   await this.getPage(pageSlug)
~~~~~~~
src/views/Page.vue:36:8 - error TS2339: Property '$watch' does not exist on type '{ name: string; components: { PageComponent: { props: string[]; }; }; data(): { page: {}; }; methods: { getPage(pageSlug: any): Promise<void>; }; created(): Promise<void>; }'.
36   this.$watch (() => this.route.params, this.getPage())
~~~~~
src/views/Page.vue:36:27 - error TS2339: Property 'route' does not exist on type '{ name: string; components: { PageComponent: { props: string[]; }; }; data(): { page: {}; }; methods: { getPage(pageSlug: any): Promise<void>; }; created(): Promise<void>; }'.
36   this.$watch (() => this.route.params, this.getPage())
~~~~~
src/views/Page.vue:36:46 - error TS2339: Property 'getPage' does not exist on type '{ name: string; components: { PageComponent: { props: string[]; }; }; data(): { page: {}; }; methods: { getPage(pageSlug: any): Promise<void>; }; created(): Promise<void>; }'.
36   this.$watch (() => this.route.params, this.getPage())                                               ~~~~~~~
Found 5 errors.

我已经编辑了我的Page.vue脚本，如下所示，但对我在生产中构建没有帮助

<template>
...
<PageComponent :page="page" />
....
</template>
<script lang=ts>
export default {
name: 'Page',
components: {
PageComponent
},
data() {
return {
page: {}            
}
},
methods: {
async getPage(pageSlug:any) {
let page = {}
await axios
.get(`/api/v1/pages/${pageSlug}/`)
.then(response => {
console.log(response.data)
this.page = response.data

})
},
},
async created() {
const route = useRoute()
const pageSlug = route.params.slug
await this.getPage(pageSlug)
this.$watch (() => this.route.params, this.getPage())
}
};
</script>

和我的pageComponent.vue:

<template>
<h1 class="title is-1">{{ page.title }}</h1>
<div class="container has-size-6">
<div class="columns is-centered is-vcentered is-mobile">
<div class="column is-narrow has-text-centered is-6 has-text-left has-text-weight-medium" v-html="page.content">
</div>
</div>
</div>
</template>
<script lang="ts">
export default {
props: ['page']
}
</script>

和我的tsconfig

{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"]
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

和我的viteconfig:

const { resolve } = require('path');
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
base: '/static/',
resolve: {
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
},
build: {
outDir: resolve('./dist'),
assetsDir: '',
manifest: true,
emptyOutDir: true,
target: 'es2015',
rollupOptions: {
input: {
main: resolve('./src/main.ts'),
},
output: {
chunkFileNames: undefined,
},
},
}
})

如何修复错误？感谢

ps以下是我必须根据@tony19答案解决的问题：

<script lang="ts">
import { defineComponent } from 'vue'
import PageComponent from './../components/PageComponent.vue'
import axios from 'redaxios'
import { useRoute } from 'vue-router'
export default  defineComponent({ 
name: 'Page',
components: {
PageComponent
},
data() {
return {
page: Object        
}
},
methods: {
async getPage() {
const route = useRoute()
const pageSlug = route.params.slug
await axios
.get(`/api/v1/pages/${pageSlug}/`)
.then(response => {
this.page= response.data
})
},
},
async created() {
const route = useRoute()

await this.getPage()
this.$watch (() => route.params, () =>  this.getPage())
}
});
</script>

Answer 1

要在组件中启用类型推断，请在组件声明周围使用defineComponent包装器：

<script lang="ts">
import { defineComponent } from 'vue'
👇
export default defineComponent({
created() {
// 💡 type inference enabled
}
})
</script>