属性“XXX”在类型“CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>”上不存在

Question

我创建了一个打字原稿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

正如Vue 文档的Typescript 支持部分所述：

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

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

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

Answer 2

对我来说，解决方案是显式定义所有计算属性、方法等的返回值。

所以而不是：

myComputedProperty() {
  return this.foo;
},

我必须做

myComputedProperty(): boolean {
  return this.foo;
},

尽管我期望，根据类型推断，这应该是不必要的

Answer 3

我收到以下错误： Property 'doThisInput' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.

并且也doThisClick给出了同样的错误。

解决方案： 我已添加declaration到组件中。

<script lang="ts">
  import Vue from 'vue';

  // Add below code sample to your component
  declare module 'vue/types/vue' {
    interface Vue {
      fields: Field[];
      doThisClick: () => void;
      doThisInput: () => void;
    }
  }

  export default Vue.extend({
    name: 'form-builder',
    data() {
      return {
        fields: [
          {
            name: 'name',
            events: { click: this.doThisClick, input: this.doThisInput },
          },
        ],
      };
    },
    methods: {
      doThisClick(field: Field): void {
        console.log('click', field, event);
      },
      doThisInput(field: Field): void {
        console.log('Input', field, event);
      },
    },
  });
</script>

Answer 4

尝试这个：

(this as any).open

这也适用于注入的属性：

(this as any).injectedProp

和$refs：

(this as any).$refs.myElement

编译器可以显示警告，但可以工作

重要提示：这是一个临时解决方案，使用类组件更优雅

Answer 5

2022 年 1 月更新：

改成。vetur.experimental.templateInterpolationService​false

对于VSCode，您可以使用搜索图标找到它：

然后，就true默认了：

然后，将其更改为false：

最后，错误解决了。

Answer 6

这似乎是由于this.$store用于计算 的返回值profilePath，并结合其声明中未指定的返回类型而莫名其妙地造成的。

一种解决方法是将返回类型指定为string：

profilePath: function(): string {

在 macOS Mojave 上使用 Vue CLI 3.7.0验证npm run serve和npm run build

GitHub 演示

Answer 7

我在使用 VS Code 编辑器时遇到此错误。

我在 vs code 上安装了 Vetur 插件，Vetur 将 vue 文件处理为 typescript 文件，所以我将其修复为编辑 settings.json 文件

请在 VS 编辑器中找到此文件，然后按如下所示进行更改

.vscode/设置.json

"vetur.experimental.templateInterpolationService": false

Answer 8

在使用打字稿时，我已经看到这个问题多次出现。我不确定这是否是问题vue-tsc或其他问题，但这是解决 linter 警告/错误的解决方案。（它可能发生在 Vue 之外，但这就是我看到的地方。我确信该解决方案对于任何其他库/框架都是相同的。）

通常情况下，问题看起来像这样......

TS2339: Property 'title' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.

解决方案是定义一些类型，以便 Vue 知道组件中尝试定义的内容。

例子：

interface IData {
  title: string;
}
interface IProps {

}
interface IComputed {

}
interface IMethods {
 
}

定义组件

export default Vue.extend<IData, IMethods, IComputed, IProps>({
   data() {
      title: "Some title"
   }
});

另请注意，传递类型参数的顺序很重要。顺序遵循 DMCP（数据、方法、计算、道具）。

Answer 9

您需要以正确的方式使用function来保存对 this 的引用。

methods: {
            toggle() {
                this.open = !this.open
                if (this.open) {
                    // Add click listener to whole page to close dropdown
                    document.addEventListener('click', this.close)
                }
            },
            close() {
                this.open = false;
                document.removeEventListener('click', this.close)
            }
        }