属性“XXX"在类型“CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>"上不存在

属性“XXX "上不存在" src="/default/index/img?u=aHR0cHM6Ly9wMC5waXFzZWxzLmNvbS9wcmV2aWV3LzExNi8zNTcvMjU3L2dyZXktbW9ua2V5LW9uLXN0ZWVsLWJhci5qcGc=&w=245&h=&w=700"/>

问题描述：

我使用 TypeScript 创建了一个 vue 组件，但在 data() 和 methods() 中出现此错误:

I created a vue component with TypeScript, and I'm getting this error in data() and in methods():

Property 'xxx' does not exist on type 'CombinedVueInstance<Vue, {},
{}, {}, Readonly<Record<never, any>>>'.

例如:

33:18 Property 'open' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>'.
    31 |         methods: {
    32 |             toggle: function () {
  > 33 |                 this.open = !this.open
       |                  ^
    34 |                 if (this.open) {
    35 |                     // Add click listener to whole page to close dropdown
    36 |                     document.addEventListener('click', this.close)

此错误也会在使用 this.close() 时显示.

This error also shows any time this.close() is used.

这是组件:

<script lang='ts'>
    import Vue from 'vue';
    import axios from 'axios'
    export default Vue.extend({
        data: function () {
            return {
                open: false
            }
        },
        computed: {
            profilePath: function () {
                return "/user/" + this.$store.state.profile.profile.user.id
            }
        },
        methods: {
            toggle: function () {
                this.open = !this.open
                if (this.open) {
                    // Add click listener to whole page to close dropdown
                    document.addEventListener('click', this.close)
                }
            },
            close: function () {
                this.open = false;
                document.removeEventListener('click', this.close)
            }
        }
    })
</script>

是什么导致了这个错误?似乎仍然在开发中构建错误，但是当我部署到生产时它们会导致问题.

What is causing this error? It seems to still build in development with the errors, but they are causing issues when I deploy to production.

答

如Typescript Support 部分:

由于 Vue 声明文件的循环性质，TypeScript 可能难以推断某些方法的类型.出于这个原因，您可能需要在渲染和计算等方法上注释返回类型.

Because of the circular nature of Vue’s declaration files, TypeScript may have difficulties inferring the types of certain methods. For this reason, you may need to annotate the return type on methods like render and those in computed.

在您的情况下，您应该将 profilePath: function () { 更改为 profilePath: function (): string {

In your case, you should change profilePath: function () { to profilePath: function (): string {

如果您有一个返回值的 render() 方法，而没有 : VNode 注释，您可能会遇到同样的错误.

You might come across the same error if you have a render() method that returns a value, without a : VNode annotation.

属性“XXX"在类型“CombinedVueInstance"上不存在

相关推荐