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

Posted 2023-02-22

【中文标题】Vue + Typescript - 使用基于类的装饰器导入错误

【英文标题】：Vue + Typescript - Import errors with class based decorators

【发布时间】：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>

【参考方案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>

【讨论】：

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