Does not work with Vue 2.5.18

[screendriver]

Just create a new project with Vue CLI and you get a

35:1 Unable to resolve signature of class decorator when called as an expression.
  Type '<VC extends VueClass<Vue>>(target: VC) => VC' is missing the following properties from type 'typeof HelloWorld': exte
nd, nextTick, set, delete, and 7 more.
    33 | import { Component, Prop, Vue } from 'vue-property-decorator';
    34 |
  > 35 | @Component
       | ^
    36 | export default class HelloWorld extends Vue {
    37 |   @Prop() private msg!: string;
    38 | }

This happens since the update of Vue and vue-template-compiler to version 2.5.18. With 2.5.17 everything works.

[jarrodldavis]

After some digging, I've found that this appears to be caused by vuejs/vue#8595. I'm not sure exactly what's going on, but having a class method (defined in VueConstructor) that returns this seems to cause issues with the type definitions by the time they get to @Component.

Changing this to VueConstructor<Vue> appears to fix this issue and preserve the method chaining added by that pull request:

diff --git a/types/vue.d.ts b/types/vue.d.ts
index 349c3432..144fa869 100644
--- a/types/vue.d.ts
+++ b/types/vue.d.ts
@@ -111,9 +111,9 @@ export interface VueConstructor<V extends Vue = Vue> {
   component<Props>(id: string, definition: FunctionalComponentOptions<Props, RecordPropsDefinition<Props>>): ExtendedVue<V, {}, {}, {}, Props>;
   component(id: string, definition?: ComponentOptions<V>): ExtendedVue<V, {}, {}, {}, {}>;
 
-  use<T>(plugin: PluginObject<T> | PluginFunction<T>, options?: T): this;
-  use(plugin: PluginObject<any> | PluginFunction<any>, ...options: any[]): this;
-  mixin(mixin: VueConstructor | ComponentOptions<Vue>): this;
+  use<T>(plugin: PluginObject<T> | PluginFunction<T>, options?: T): VueConstructor<Vue>;
+  use(plugin: PluginObject<any> | PluginFunction<any>, ...options: any[]): VueConstructor<Vue>;
+  mixin(mixin: VueConstructor | ComponentOptions<Vue>): VueConstructor<Vue>;
   compile(template: string): {
     render(createElement: typeof Vue.prototype.$createElement): VNode;
     staticRenderFns: (() => VNode)[];

[HerringtonDarkholme]

This is probably caused by variance check. I can give it a look.

[ktsn]

The cause is this commit which sets return type of class methods of Vue to itself.
But it might be a TypeScript bug. I already filed about that in TypeScript repo. microsoft/TypeScript#28930

[nemethmik]

I have just received exactly the same error: ERROR in C:/Users/nemet/tiva11/tiva11forvue/src/components/HelloWorld.vue
36:1 Unable to resolve signature of class decorator when called as an expression.
Type '<VC extends VueClass>(target: VC) => VC' is missing the following properties from type 'typeof HelloWorld': extend, nextTick, set, delete, and 7 more.

Is there a workaround? Thanks.

[ZechariahMcPherson]

I am having the same issue. I spent the better part of three hours working on this. There is a work around go to tsconfig.json inside "compilerOptions" : {...} insert "strictFunctionTypes":false but it is kinda dangerous work around so be careful.

[nemethmik]

I've just found another workaround: When creating my project with CLI 3 I set NO to the question "Use class-style component syntax?", so the problem is definitely with those nifty decorators :-)

[2-5]

The change which introduced this breakage mentioned that all tests passed.

Maybe some test cases which use Vue, decorators and TypeScript together should be added, since a lot of people use them?

[chs97]

Type 'VueClass' is not assignable to type 'typeof App'.
Types of parameters 'options' and 'options' are incompatible.
Type 'ComponentOptions<Vue, DefaultData, DefaultMethods, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>> | undefined' is not assignable to type 'ThisTypedComponentOptionsWithArrayProps<Vue, any, any, any, any> | undefined'.
Type 'ComponentOptions<Vue, DefaultData, DefaultMethods, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>' is not assignable to type 'ThisTypedComponentOptionsWithArrayProps<Vue, any, any, any, any>'.
Type 'ComponentOptions<Vue, DefaultData, DefaultMethods, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>' is not assignable to type 'ComponentOptions<Vue, any, any, any, any[], Record<any, any>>'.

@HerringtonDarkholme @ktsn vue@2.5.19 ~~~ vue break change.

[nemethmik]

I really appreciate your work, Friends. We've recently moved from another well-known JS framework over to Vue/Vuetify because CLI3 supports directly TypeScript as first class citizen. In our organization management would never allow to start a project with a programming language without a strong, well-supported type system. The other framework-chain we evaluated first had a powerful type system, but it wasn't integrated, and it was terribly slow; this was enough reason we started looking for a better solution, so we found Vue/TS/CLI3/Vuetify. The technical evaluators have to give a presentation that Vue/Vuetify with its out-of-the box support for TS (and a number of other goodies, like PWA), which came with CLI3, would be perfect for the requirements of our mobile/web business application project. When we saw how simple was to add Vuetify to a TS (sic!) project with "vue add Vuetify", all the IT management wowed.