对象原型只能是一个对象或null：未定义

Question

当试图创建一个codeandbox来重现错误时，我遇到了另一个问题。

这是我的密码和邮箱： https://codesandbox.io/s/vue-typescript-example-o7xsv

错误是：

  

对象原型只能是一个对象或null：未定义

似乎与类扩展有关。 HelloWorld类正在扩展Vue，并且已导入Vue：

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

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

@Component
export default class HelloWorld extends Vue {
  msg = "HelloWorld";
}
</script>

控制台错误：

编译版本：

我已经看到了该线程，但没有帮助： TypeError in Typescript

Answer 1

该问题特定于当前使用的Vue+TypeScript template。该模板未使用synthetic default exports，需要将Vue导入为

import * as Vue from "vue";

代替

import Vue from "vue";

该设置似乎使用Babel进行代码转换，并使用TypeScript进行类型检查。

常规模块也已损坏，它们作为默认导出导出：

export default Vue.component({
...

但是为了起作用，它们应该作为*导入：

import * as HelloWorld from "./components/HelloWorld";

另一个问题是如何使用vue-class-component和@Component装饰器。根据经验，TypeScript / ES.Next装饰器应为factories。这使修饰符的用法保持一致，因为它们可以接受也可以不接受参数。这也减轻了在不应该适当时不调用装饰器的问题。它应该用作：

@Component()
export default class HelloWorld extends Vue {...}