javascript - 类型 'XXX' 上不存在属性 'CombinedVueInstance>>'

Question

我用 TypeScript 创建了一个 vue 组件，但在 data() 和 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() 显示。

这是组件:

<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>

是什么导致了这个错误？它似乎仍在开发过程中出现错误，但当我部署到生产环境时它们会导致问题。

Answer 1

如 Typescript Support 中所述Vue 文档部分:

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 {

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