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

【问题标题】：Vue + Typescript - Import errors with class based decoratorsVue + Typescript - 使用基于类的装饰器导入错误
【发布时间】：2021-01-23 12:29:54
【问题描述】：

我正在尝试使用 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)

mycode.vue:

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component // 1st Error '@Component'
export default class ProdItem extends Vue { // 2nd error 'Vue'
  
}
</script>

【问题讨论】：

标签： javascript typescript vue.js vuejs3

【解决方案1】：

您可能正在尝试使用来自官方 vue-class-component 文档的示例，但目前是针对 7x 版本，它只能与 Vue 2 一起使用。

Vue 3 需要 vue-class-component 8x，这还没有记录，但您可以参考描述更改的 vue-class-component Issue #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 的工作示例。

【讨论】：

【解决方案2】：

基于这个issue 和这个one 你可以这样做：

<script lang="ts">

import {vue} from 'vue-class-component'


export default class ProdItem extends Vue { 
  
}
</script>

【讨论】：

【解决方案3】：

使用装饰器，您不需要({})。试试

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component  // 1st Error '@Component'
export default class ProdItem extends Vue { // 2nd error 'Vue'
  
}
</script>

【讨论】：

对不起，我不小心把那个放在那里了。我刚刚编辑了帖子。道歉