Vue3/打字稿访问属性

Question

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

第一个错误：

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

要在组件中启用类型推断，use the defineComponent wrapper around the component declaration:

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

Vue3/打字稿访问属性

Vue3 / typescript accessing properties

vue.js

vuejs3

vite