Vue-class-component: Setting components in Component decorator causes Typescript 2.4 error

Created on 12 Jul 2017 · 7Comments · Source: vuejs/vue-class-component

The following code worked in Typescript 2.3

@Component({
  components: {
    Slideout,
    PanelComponent,
    VideoComponent
  }
})
export default class App extends Vue {
  @Prop()
  client: client;

  open() {
    console.log("Opened!");
  }
}

Using Typescript 2.4, I get the following error:

ERROR in ./~/ts-loader!./src/App.ts
(10,3): error TS2345: Argument of type '{ components: { 'Slideout': any; 'PanelComponent': "string" | "number" | "boolean" | "sym...' is not assignable to parameter of type 'VueClass'.
Object literal may only specify known properties, and 'components' does not exist in type 'VueClass'.

Source

qdot

👍10

Most helpful comment

@qdot Thank you for the reproduction. This seems to be fixed if you update vuefiles.d.ts like following (remove typeof):

declare module "*.vue" {
  import Vue from 'vue';
  export default Vue;
}

I remember it had worked with typeof but now it exports the string literal type that the typeof keyword returns instead of the constructor type of Vue.

I already make a PR to fix the example in this repo via #126

ktsn on 16 Jul 2017

👍7

All 7 comments

I also get this kind of error when using the vuedraggable plugin, but not when using my own components. I think this might have something to do with the author's packages rather than with Vue Class Component.

vjcagay on 12 Jul 2017

Side components should add .d.ts for it to work AFAIK

nickmessing on 12 Jul 2017

👍1

Could you provide a minimal reproducible project by github repo?

ktsn on 12 Jul 2017

Minimal project repo: https://github.com/qdot/vue-component-test-case

Travis result from build: https://travis-ci.org/qdot/vue-component-test-case/builds/253062538

qdot on 13 Jul 2017

@qdot Thank you for the reproduction. This seems to be fixed if you update vuefiles.d.ts like following (remove typeof):

declare module "*.vue" {
  import Vue from 'vue';
  export default Vue;
}

I remember it had worked with typeof but now it exports the string literal type that the typeof keyword returns instead of the constructor type of Vue.

I already make a PR to fix the example in this repo via #126

ktsn on 16 Jul 2017

👍7

This made it work for me, thanks so much for the help and the library! :)

qdot on 16 Jul 2017

@nickmessing