typescript - 尝试识别引用 Vue 组件的参数时出现 "{{component}} refers to to a value, but is being used as a type"错误

Question

我有一个将 Vue 组件作为参数的函数。

dothings.ts

import App from 'src/app';

export default class DoThings {
  public static fetch(liveApp: App) {
    liveApp.updateMe = 'updated';
  }
}

我想将 App 组件传递给 fetch 函数，这样我就可以将其状态作为函数的一部分进行操作。 App 组件如下所示:

app.vue

import Vue from 'vue';
import DoThings from 'dothings';


export default Vue.extend({
  data() {
    return {
      updateMe: '',
    }
  },
  methods: {
    fetch() {
      DoThings.fetch(this);
    }
  },
});

我尝试引用由 app.vue 导出的“App”组件，但失败并出现错误:

  TS2749: 'App' refers to a value, but is being used as a type here.

带有指向 public static fetch.... 行的指针

指示我希望传递给函数的类型是导出的 Vue 组件的正确方法是什么？

特别是，我不清楚 Typescript 如何知道 Vue 将其 data() 方法返回对象上的所有值映射到 Vue 组件本身的属性。方法相同。我尝试仅使用 Vue.Component 作为类型，但显然这引发了诸如 updateMe 之类的错误在类型 Vue.Component 上不存在。

Answer 1

解决方案是使用 typescript typeof 运算符。

import App from 'src/app';

export default class DoThings {
  public static fetch(liveApp: typeof App) {
    liveApp.updateMe = 'updated';
  }
}