VueJS：编译器错误状态数据属性在通过此属性访问时不存在答案

【问题标题】：VueJS: Compiler error states data property doesn't exist when access via this propertyVueJS：编译器错误状态数据属性在通过此属性访问时不存在
【发布时间】：2020-11-06 13:25:33
【问题描述】：

我遇到的问题似乎只是我的编译器的问题。它不喜欢它找不到我在数据部分中定义的属性。如果我将 'this' 替换为 '(this as any)' 它运行得很好。这让我相信我的打字稿有问题需要解决。该错误消息非常适合我的情况，但我不知道如何解决它。

编辑以添加 shims-vue.d.ts

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

【问题讨论】：

看起来 TypeScript 不知道它应该如何处理 Vue 文件。错误中的 this 指的是 computed 对象，而不是组件。你如何编译你的代码？
我使用“vue-cli-service serve”来构建和托管代码。我认为它使用 webpack ......但我不确定。
你的项目中有vue-shims.d.ts吗？此外，您的第 67 到 69 行看起来很时髦，因为您说 (this as any).。一般来说，您根本不需要说任何话，因为this. 非常好。使用any 几乎违背了首先使用 TS 的核心目的
(this as any) 是我解决我所问问题的方法。它允许编译代码并在运行时正常工作。如果我将编译器抱怨的 this 替换为（this as any），它将编译并正常工作。我只是同意你的观点，它看起来很时髦，我不喜欢这样做。我很想解决这个问题并将它们全部删除。编辑了我的问题以包含我正在使用的 vue-shims.d.ts 文件。但不确定它的作用。

标签： vue.js

【解决方案1】：

似乎计算属性可能需要显式类型注释，as in this answer。而不是

items() {
...
}

你应该有

items(): ItemType[] {
...
}

Typescript 然后应该理解this 参考。 class component syntax 也值得考虑，根据我的经验，它更适合 Vue 2 中的打字稿（这个问题不会发生）。

【讨论】：

【解决方案2】：

最终解决这个问题的是我的声明性声明。我的错误：

export default {
    name: 'Home',
    components: {
        ...
    },
    ...
};

修复：

export default Vue.extend({
    name: 'Home',
    components: {
        ...
    },
    ...
});

【讨论】：