Vue + Typescript - 使用基于类的装饰器导入错误

Question

我正在尝试使用 TypeScript 和基于类的组件来设置 Vue 3。但是，我在将Component装饰器导入Vue构造函数时不断出错：

This expression is not callable. Type 'typeof
import("/Users/*folder*/node_modules/vue-class-component/dist/vue-class-component")'
has no call signatures. Vetur(2349)

我的代码.vue：

This expression is not callable. Type 'typeof
import("/Users/*folder*/node_modules/vue-class-component/dist/vue-class-component")'
has no call signatures. Vetur(2349)

Answer 1

您可能正在尝试使用官方vue-class-component文档中的示例，但目前适用于 7x 版本，该版本只能与 Vue 2 一起使用。

Vue 3 需要vue-class-component 8x，该文件尚未记录，但您可以参考描述更改的vue-class-component问题 #406。与您的问题相关的通知：

• @Component将重命名为@Options.
• @Options 如果您不使用它声明任何选项，则它是可选的。
• Vue构造函数由vue-class-component包提供。

由于您的组件没有选项，您可以@Options从组件中省略装饰器：

// BEFORE:
import Component from 'vue-class-component'
@Component
class {}

// AFTER:
/* no options used, so no @Options decorator needed */
class {}

此外，Vue 3 不再导出 Vue 构造函数，而是导出了vue-class-component，因此您的组件必须对其进行扩展：

// BEFORE:
import Vue from 'vue'

// AFTER:
import { Vue } from 'vue-class-component'

作为参考，您可以使用Vue CLI 生成一个Vue 3 + TypeScript项目，以使用上述最新版本的工作示例vue-class-component。