Vue js 3 - 类型“CreateComponentPublicInstance<{}、{}、{}、{}、{}”上不存在属性“projects”，

Question

问题：

Property 'projects' does not exist on type 'CreateComponentPublicInstance<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, {}, {}, false, OptionTypesType<{}, ... 4 more ..., {}>, ... 5 more ..., {}>'

由于某种原因，它在计算时尖叫，你可以看到我的 this.project 或 this.message。

我不知道如何解决它，请帮忙。包.json

 "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^5.2.6",
    "fork-ts-checker-webpack-plugin": "^6.2.10",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "sass-loader": "10.1.1",
    "terser-webpack-plugin": "^4.2.3",
    "prettier": "^2.2.1",
    "typescript": "~4.1.5"
  }

问题来自于我添加到shims-vue.d.ts时：

import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'

declare module '@vue/runtime-core' {
  // declare your own store states
  interface State {
    count: number
  }

  // provide typings for `this.$store`
  interface ComponentCustomProperties {
    $store: Store<State>
  }
}

然后它显示我的错误。如果我删除商店声明，它会在商店中尖叫，但不会在计算中尖叫。

Answer 1

我在计算属性上遇到了类似的 Vetur 错误问题，并且搜索提出了这个问题。

根据此链接，这是有关 Vue 的打字和 Typescript 的已知问题。

https://vuejs.github.io/vetur/guide/FAQ.html#property-xxx-does-not-exist-on-type-combinedvueinstance

更改计算属性以具有显式返回类型似乎可以解决该问题。

greet (): string {
  return this.msg + ' world'
}

更多细节和示例：

https://v2.vuejs.org/v2/guide/typescript.html#Annotating-Return-Types

Answer 2

我因为这个错误浪费了很多时间，就我而言，还与 vue 的“数据”属性有关。首先，我遇到了节点模块的一些问题，在卸载全局、本地并重新安装软件包后，我注意到空白项目（由 vue-cli 创建的）现在可以工作，只有我的主项目不断报告此错误。

我的项目现在的问题是，只有全局注册的组件不能被 vetur 或 volar 正确识别，所以我只在它们上收到此线程的错误。

我最终偶然发现了一个解决方案，我会保留它，直到我弄清楚到底发生了什么。当我像这样声明“数据”时，Typescript 仅停止返回此错误：

data: () => { 

其他变体（例如这个变体）不起作用

    //data() { also not works
    data: function () {
        return {
            comida: 1,
        }
    },
    methods: {
        setupVisitsCategoryCard() {
            this.comida = 2 //Property 'comida' does not exist on type 'CreateComponentPublicInstance<...'
        }
    }
    ```

Answer 3

我已经添加了

import { ComponentCustomProperties } from "vue";
import { Store } from "vuex";

declare module "@vue/runtime-core" {
  interface ComponentCustomProperties {
    $store: Store<State>;
  }
}

到 vuex-shim.d.ts 并解决问题。