如何修复 VSCode 中的“‘CombinedVueInstance’类型上不存在属性 XX”错误？ （带有打字稿的Vue）

Posted 2023-02-22

【中文标题】如何修复 VSCode 中的“‘CombinedVueInstance’类型上不存在属性 XX”错误？ （带有打字稿的Vue）

【英文标题】：How to fix "Property XX does not exist on type 'CombinedVueInstance" errors in VSCode? (Vue with Typescript)

【发布时间】：2019-06-17 08:19:36

【问题描述】：

编辑我的 Vue Typescript 文件时，VS Code 报告了很多问题/红线：

示例错误：

[ts] Property 'isLoading' does not exist on type 'CombinedVueInstance<Vue, 
object, > object, object, Readonly<Record<never, any>>>'. [2339]

当我在“this”上引用一个属性时，问题似乎出现了，并且所有此类引用在编辑器中都有一条红线，说明上述错误的变体。对于 Vue 的数据对象中定义的属性和方法中定义的函数，问题都是一样的。

现在，有两个有趣的方面：​​

直到今天我对这些文件没有任何问题。昨天，在关闭之前，一切都按预期工作。今天重启我遇到了这个问题。 代码编译并运行。如果我使用 tsc 构建文件，它们可以很好地编译 - 应用程序会按预期部署和工作。

关于我的设置的信息：

npm view typescript version 给了我 3.2.4 版 Vue 在 2.5.22 VS 代码位于 1.30.2。

tsconfig.js：

    "compilerOptions": 
        "lib": [
            "es6",
            "dom"
        ],
        "noImplicitAny": true,
        "allowJs": true,
        "target": "es5",
        "strict": true,
        "module": "es6",
        "moduleResolution": "node",
        "outDir": "../../../dist/public/js",
        "sourceMap": true
    

我尝试了以下方法：

重新安装 Typescript 和 Vue 多次重启 VS Code 手动重启 TSServer 重新启动计算机

我现在完全被难住了——希望有人能帮助我......

下面的代码示例（所有这些。引用在我的 VS 代码中有一条红线）：

import axios from "axios";
import Vue from "vue";

// tslint:disable-next-line no-unused-expression
new Vue(
    computed: 
        hasProvider(): boolean 
            // this line throw two errors
            return this.isLoading === false && this.providerList.length > 0;
        ,
    ,
    data() 
        return 
            description: "",
            id: "",
            isLoading: true,
            name: "",
            providerList: [],
        ;
    ,
    el: "#app",
    methods: 
        loadProviderList() 
            axios
                .get("/api/provider/all")
                .then((res: any) => 
                    // these lines throw an error
                    this.providerList = res.data.items;
                    this.isLoading = false;
                )
                .catch((err: any) => 
                    // tslint:disable-next-line:no-console
                    console.log(err);
                );
        
    ,
    mounted() 
        // this line throw an error
        return this.loadProviderList();
    
);

【问题讨论】：

也许对***.com/questions/56002310/…有帮助。

【参考方案1】：

今天上班遇到这个错误（Vue without TypeScript in VSCode）。

对我们来说，它也不知从何而来，最终罪魁祸首只是需要重新加载 VSCode 中的 Vetur 扩展。

【讨论】：

遇到了同样的问题。可能在 VS Code 更新或 npm 包更新之后开始发生。尝试禁用并重新加载 Vetur。起初它似乎有效，但随后波浪线又回来了。

虽然重新加载不起作用，但禁用 Vetur->Validation:Interpolation in VSCode settings.

【参考方案2】：

在 settings.json 中，设置：

"vetur.experimental.templateInterpolationService": false

【参考方案3】：

似乎问题出在我的mounted() 阶段的return 语句上。删除该返回（可能是我使用的示例中剩余的东西）解决了这个问题。

mounted() 
        // this works
        this.loadProviderList();

不过，奇怪的是环境从一天到另一天改变了行为，并且它编译了 - 可能永远不会得到答案:)