如何使用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'.

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

显然,代码已经编译完毕

[at-loader]好的,0.97秒.

但那时程序无法正常工作

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

found in

---> <Anonymous>
       <Root>

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

Answer 1

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

"strictFunctionTypes": false

这是对功能进行检查的方式的改变