对象原型只能是 Object 或 null：未定义答案

【问题标题】：Object prototype may only be an Object or null: undefined对象原型只能是 Object 或 null：未定义
【发布时间】：2019-06-11 14:22:35
【问题描述】：

在尝试创建代码框来重现错误时，我遇到了另一个问题。

这是我的代码框： 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

【问题讨论】：

问题应包含所有相关代码，而不仅仅是指向它的链接。请张贴。
添加了 HelloWorld 代码
我发布了一个答案。我没有建议如何修复 Codesandbox，因为您基于它的模板已损坏。如果您正在寻求实用的解决方案，请尝试stackblitz.com/edit/vuejs-starter-typescript
感谢此链接，我会使用它。你说codesandbox模板坏了……但是不能修复？

标签： typescript vue.js

【解决方案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 {...}

【讨论】：

是用的Vue+TypeScript模板，没错。但是我随后编辑了 tsconfig.json 并添加了：“allowSyntheticDefaultImports”：true 和“esModuleInterop”：true。
查看说明。 TS 配置不会影响模块在此处的转换方式，这就是问题所在。我不知道如何修复它。那个原始的未分叉的模板需要 import default export as import * as HelloWorld from "./components/HelloWorld" 表明它有问题。