TS2769: No overload matches this call

Typescript: 3.7.2 vue-property-decorator: 8.3.0 Vue: 2.6.10

All compiles fine, and I see component in browser which is working as expected, BUT I forced to use ts-ignore on Vue initialization =( Just uncomment this line, and start npm run deploy.dev and you catch this error:

error TS2769: No overload matches this call.
  Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps<Vue, { mySelected: null; }, object, object, "$el" | "$options" | "$parent" | "$root" | "$children" | "$refs" | "$slots" | "$scopedSlots" | "$isServer" | "$data" | "$props" | ... 15 more ... | "$createElement"> | undefined): CombinedVueInstance<...>', gave the following error.
    Argument of type '{ el: string; components: { IamHeader: typeof IamHeader; IamSelect: typeof IamSelect; }; data: { mySelected: null; }; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithArrayProps<Vue, { mySelected: null; }, object, object, "$el" | "$options" | "$parent" | "$root" | "$children" | "$refs" | "$slots" | "$scopedSlots" | "$isServer" | "$data" | "$props" | ... 15 more ... | "$createElement">'.
      Type '{ el: string; components: { IamHeader: typeof IamHeader; IamSelect: typeof IamSelect; }; data: { mySelected: null; }; }' is not assignable to type 'ComponentOptions<Vue, DataDef<{ mySelected: null; }, Record<"$el" | "$options" | "$parent" | "$root" | "$children" | "$refs" | "$slots" | "$scopedSlots" | "$isServer" | "$data" | "$props" | "$ssrContext" | ... 14 more ... | "$createElement", any>, Vue>, object, object, ("$el" | ... 25 more ... | "$createElement")[],...'.
        Types of property 'components' are incompatible.
          Type '{ IamHeader: typeof IamHeader; IamSelect: typeof IamSelect; }' is not assignable to type '{ [key: string]: VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...>; }'.
            Property 'IamHeader' is incompatible with index signature.
              Type 'typeof IamHeader' is not assignable to type 'VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...>'.
                Type 'typeof IamHeader' is not assignable to type 'VueConstructor<Vue>'.
                  Type 'IamHeader' is not assignable to type 'CombinedVueInstance<Vue, object, object, object, Record<never, any>>'.
                    Type 'IamHeader' is missing the following properties from type 'Vue': $el, $options, $parent, $root, and 23 more.
  Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps<Vue, { mySelected: null; }, object, object, { readonly $el: unknown; readonly $options: unknown; readonly $parent: unknown; readonly $root: unknown; readonly $children: unknown; readonly $refs: unknown; readonly $slots: unknown; ... 19 more ...; $createElement: unknown; }> | undefined): CombinedVueInstance<...>', gave the following error.
    Argument of type '{ el: string; components: { IamHeader: typeof IamHeader; IamSelect: typeof IamSelect; }; data: { mySelected: null; }; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithRecordProps<Vue, { mySelected: null; }, object, object, { readonly $el: unknown; readonly $options: unknown; readonly $parent: unknown; readonly $root: unknown; readonly $children: unknown; readonly $refs: unknown; readonly $slots: unknown; readonly $scopedSlots: unknown; ... 18 more ......'.
      Type '{ el: string; components: { IamHeader: typeof IamHeader; IamSelect: typeof IamSelect; }; data: { mySelected: null; }; }' is not assignable to type 'ComponentOptions<Vue, DataDef<{ mySelected: null; }, { readonly $el: unknown; readonly $options: unknown; readonly $parent: unknown; readonly $root: unknown; readonly $children: unknown; readonly $refs: unknown; readonly $slots: unknown; readonly $scopedSlots: unknown; ... 18 more ...; $createElement: unknown; }, Vu...'.
        Types of property 'components' are incompatible.
          Type '{ IamHeader: typeof IamHeader; IamSelect: typeof IamSelect; }' is not assignable to type '{ [key: string]: VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...>; }'.
  Overload 3 of 3, '(options?: ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>> | undefined): CombinedVueInstance<...>', gave the following error.
    Argument of type '{ el: string; components: { IamHeader: typeof IamHeader; IamSelect: typeof IamSelect; }; data: { mySelected: null; }; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>'.
      Types of property 'components' are incompatible.
        Type '{ IamHeader: typeof IamHeader; IamSelect: typeof IamSelect; }' is not assignable to type '{ [key: string]: VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...>; }'.
          Property 'IamHeader' is incompatible with index signature.
            Type 'typeof IamHeader' is not assignable to type 'VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...>'.
              Type 'typeof IamHeader' is not assignable to type 'VueConstructor<Vue>'.
TypeScript: 1 semantic error
TypeScript: emit failed
[10:57:17] 'transpile.dev' errored after 1.56 s
[10:57:17] Error: TypeScript: Compilation failed
    at Output.mightFinish (C:\Projects\systemjs-ts-es6-vue\node_modules\gulp-typescript\release\output.js:131:43)
    at Output.finish (C:\Projects\systemjs-ts-es6-vue\node_modules\gulp-typescript\release\output.js:123:14)
    at ProjectCompiler.inputDone (C:\Projects\systemjs-ts-es6-vue\node_modules\gulp-typescript\release\compiler.js:97:29)
    at CompileStream.end (C:\Projects\systemjs-ts-es6-vue\node_modules\gulp-typescript\release\project.js:125:31)
    at DestroyableTransform.onend (C:\Projects\systemjs-ts-es6-vue\node_modules\readable-stream\lib\_stream_readable.js:577:10)
    at Object.onceWrapper (events.js:286:20)
    at DestroyableTransform.emit (events.js:203:15)
    at DestroyableTransform.EventEmitter.emit (domain.js:466:23)
    at endReadableNT (C:\Projects\systemjs-ts-es6-vue\node_modules\readable-stream\lib\_stream_readable.js:1010:12)
    at process._tickCallback (internal/process/next_tick.js:63:19)

Type 'typeof IamHeader' is not assignable to type 'VueConstructor<Vue> from src

@Component({
	name,
	template,
})
export class IamHeader extends Mixins(BemComponent) {
}

from src

@Component
export class BemComponent extends Vue
	implements IBem, IClassComponent {
}

[ericksonc]

Just in case anyone else is getting similar “no overload matches this call” errors, I was having a similar issue when I was trying to import a component defined in vanilla JS.

The main thing is that the rule about needing to use Vue.extend({}) applies to child components as well.

To fix it I just needed to change this:

import MyComponent from '...'
@Component({ 
  components: {
    "myComponent": myComponent
  } 
})

Into this:

import MyComponent from '...'
@Component({ 
  components: {
    "myComponent": Vue.extend(myComponent)
  } 
})

[NikoGrano]

My mistake which caused this:

I had same issue, however, I was able to fix it. Propably nobody else will have totally same retarded mistake as I made, but this might help in debugging.

So, I had code

    @Component({
      components: {
        HStockWidgetItemCount,
        HStockWidgetActions,
        HStockTableProducts
      }
    })
    export default class StockOverview extends Vue {
      readonly name: string = 'StockOverview';
    }

This was causing TS2769. Thanks to @ericksonc I tried his way to fix this. So I end up with following code:

    @Component({
      components: {
        'h-stock-widget-item-count': Vue.extend(HStockWidgetItemCount),
        'h-stock-widget-actions': Vue.extend(HStockWidgetActions),
        'h-stock-table-products': Vue.extend(HStockTableProducts)
      }
    })
    export default class StockOverview extends Vue {
      readonly name: string = 'StockOverview';
    }

Well, this did either work. I end up with ERROR in /.../HStockWidgetActions.vue.ts(29,2). So this error was caused totally by faulty module. In my case the fault in this module was missing the extending of Vue.

Meaning by wrong code was following

    import { Component } from "vue-property-decorator";

    @Component
    export default class HStockWidgetActions {
        public readonly name: string = 'HStockWidgetActions';
    }

while it supposed be

    import { Vue, Component } from "vue-property-decorator";

    @Component
    export default class HStockWidgetActions extends Vue {
        public readonly name: string = 'HStockWidgetActions';
    }

After this I just put back the “correct” code and it passed without problems.

    @Component({
      components: {
        HStockWidgetItemCount,
        HStockWidgetActions,
        HStockTableProducts
      }
    })
    export default class StockOverview extends Vue {
      readonly name: string = 'StockOverview';
    }

Possible another solution

I remember also having this issue few weeks before also. When this happend after I switched node from 10 to 13 with nvm. Solution to this was just drop the node_modules folder and install again. Problem solved with that.

Just one question rises… Why the heck Javascript/TypeScript packages are so easy to break and why they dont have proper stacktrace to debug… 😑