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

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>

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

Answer 1

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

"strictFunctionTypes": false

这是 functions are checked 方式的改变