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

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>

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

标签： javascripttypescriptvue.jsvuejs2vue-component

Answer 1

如 Vue 文档的Typescript Support部分所述：

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

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

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