Vue + Typescript - 使用基于类的装饰器导入错误 [英] Vue + Typescript - Import errors with class based decorators

问题描述

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

<块引用>

此表达式不可调用.输入 'typeof导入(/Users/*文件夹*/node_modules/vue-class-component/dist/vue-class-component")'没有呼叫签名.维图尔(2349)

mycode.vue:

解决方案

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

Vue 3 需要 vue-class-component 8x，目前还没有文档化，但是可以参考 vue-class-component 问题 #406，描述了这些变化.与您的问题相关的通知:

<块引用>

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

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

//之前:从'vue-class-component'导入组件@成分班级 {}//后:/* 没有使用选项，所以不需要@Options 装饰器 */班级 {}

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

//之前:从'vue'导入Vue//后:从'vue-class-component'导入{ Vue}

作为参考，您可以使用 Vue CLI 生成 Vue 3 + TypeScript 使用如上所述的最新 vue-class-component 的工作示例.

I'm trying to set up Vue 3 with TypeScript and class-based components. However, I keep getting on error on importing the Component decorator the Vue constructor:

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>

解决方案

You might be trying to use the example from the official vue-class-component docs, but that's currently for the 7x version, which can only be used with Vue 2.

Vue 3 requires vue-class-component 8x, which is not yet documented, but you can refer to vue-class-component Issue #406 that describes the changes. The notices relevant to your question:

• @Component will be renamed to @Options.
• @Options is optional if you don't declare any options with it.
• Vue constructor is provided from vue-class-component package.

Since your component has no options, you could just omit the @Options decorator from your component:

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

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

Also, Vue 3 no longer exports the Vue constructor, but vue-class-component does, so your component would have to extend that instead:

// BEFORE:
import Vue from 'vue'

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

For reference, you can use Vue CLI to generate a Vue 3 + TypeScript project to play with a working example that uses the latest vue-class-component as described above.

这篇关于Vue + Typescript - 使用基于类的装饰器导入错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！