Vue 3 + vue-property-decorator 的“超级表达式必须为 null 或函数”

Posted 2023-03-16

【中文标题】Vue 3 + vue-property-decorator 的“超级表达式必须为 null 或函数”

【英文标题】："Super expression must either be null or a function" with Vue 3 + vue-property-decorator

【发布时间】：2021-11-01 04:25:45

【问题描述】：

我正在尝试使用 Vue 3 和 TypeScript 创建一个新项目。为此，我想使用 vue-property-decorator，因为我喜欢使用装饰器的类语法。

我使用 Vue CLI 创建了一个新的 Vue 3 + TypeScript 项目。

现在，如果我尝试将 vue-property-decorator 导入添加到 Vue 组件，我会在浏览器控制台中收到错误“超级表达式必须为空或函数”。我的组件如下所示：

<template>
   <div>Hi</div>
</template>

<script lang="ts">
import  Vue, Prop  from "vue-property-decorator";

export default class App extends Vue 
   @Prop(Number) readonly propA: number | undefined;
   @Prop( default: "default value" ) readonly propB!: string;
   @Prop([String, Boolean]) readonly propC: string | boolean | undefined;

</script>

该脚本只是模块文档复制粘贴到我的 App.vue 中的第一个示例。然后我的 main.ts 看起来像这样：

import  createApp  from "vue";
import App from "./App.vue";

createApp(App).mount("#app");

我看不出我的错误可能来自这小段代码的什么地方。没有任何其他组件、路由器或类似组件在任何地方导入。

【参考方案1】：

在“导出默认类”部分上方添加@Component 是否可以解决您的问题？

import  Vue, Prop, Component  from "vue-property-decorator";
@Component
export default class App extends Vue 

编辑：啊，据我所知，vue-property-decorator 还不支持 Vue 3。不过有一个候选版本（版本 10）支持它。

https://github.com/kaorun343/vue-property-decorator/blob/next/CHANGELOG.md

【讨论】：

我以前见过那个候选版本，但没有意识到npm install vue-property-decorator 已经安装了与 vue2 兼容的版本。我必须明确使用npm install vue-property-decorator@10.0.0-rc.2。所以这是我没有正确理解 npm install ...

那是因为当你写npm install vue-property-decorator时npm会安装带有latest标签的版本。写npm show vue-property-decorator查看最新标签是什么版本。你也可以写 npm install vue-property-decorator@rc 来安装 v10