如何将 vue js @Component 与 typescript 2.6.1 一起使用？

Question

我创建了一个小组件：

import Vue from 'vue';
import Component from 'vue-class-component';
import { Inject, Model, Prop, Watch } from 'vue-property-decorator';

@Component({
    template: require('./home.html'),
})
export class HomeComponent extends Vue {
    name: string = 'User';
}

我可以使用 typescript@2.5.3 毫无问题地编译项目

但是如果我尝试使用 typescript@2.6.1 我得到了这个错误：

[at-loader] ./src/components/home/home.ts:8:2 中的错误

TS2345: Argument of type 'typeof HomeComponent' is not assignable to parameter of type 'VueClass<Vue>'.
Type 'typeof HomeComponent' is not assignable to type 'new (...args: any[]) => Vue'.
  Type 'HomeComponent' is not assignable to type 'Vue'.
    Types of property '$options' are incompatible.
      Type 'ComponentOptions<HomeComponent, DefaultData<HomeComponent>,
      DefaultMethods<HomeComponent>, Defaul...' is not assignable to type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Rec...'.
      Type 'HomeComponent' is not assignable to type 'Vue'.

我知道问题出在这 3 行代码中：

@Component({
    template: require('./home.html'),
})

我尝试用这种方式替换：

@Component

但我得到了错误：

ERROR in [at-loader] ./src/components/home/home.ts:7:1
TS1238: Unable to resolve signature of class decorator when called as an expression.
Type '<VC extends VueClass<Vue>>(target: VC) => VC' is not assignable to type 'typeof HomeComponent'.
  Property 'extend' is missing in type '<VC extends VueClass<Vue>>(target: VC) => VC'.

所以我尝试完全删除@Component 的 3 行

很明显，代码已经编译好了

[at-loader] 好的，0.97 秒。

然后程序无法运行

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Anonymous>
       <Root>

如何在 typescript 2.6.1 中使用 vue js @Component？

Answer 1

我遇到了同样的问题，我能够消除该错误的方法是添加到我的 tsconfig.json

"strictFunctionTypes": false

这是 functions are checked 方式的改变