How use vue js @Component with typescript 2.6.1?

Question

I have created a little component:

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';
}

i can compile the project without problems using [email protected]

But if i try to use [email protected] i got this errors:

ERROR in [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'.

I understand that the problem is in these 3 lines of code:

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

I tried to replace in this way:

@Component

but i got the error:

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'.

So I tried to completely remove the 3 lines @Component

Obviously, the code has been compiled

[at-loader] Ok, 0.97 sec.

but then the program cannot work

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

found in

---> <Anonymous>
       <Root>

How use vue js @Component with typescript 2.6.1?

Answer 1

I was having the same issue and the way I was able to remove that error was to add in my tsconfig.json

"strictFunctionTypes": false

This was a change in the way that functions are checked