Skip to content

Cannot use an abstract class component as mixin #342

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
julaudo opened this issue Jun 11, 2019 · 2 comments
Closed

Cannot use an abstract class component as mixin #342

julaudo opened this issue Jun 11, 2019 · 2 comments
Labels

Comments

@julaudo
Copy link

julaudo commented Jun 11, 2019

My HelloWorld component is using Parent as a Mixin:

App.vue:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

@Component({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}
</script>

HelloWorld.vue:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script lang="ts">
import {Component, Mixins, Prop} from 'vue-property-decorator';
import Parent from '@/components/Parent';

@Component
export default class HelloWorld extends Mixins(Parent) {
  @Prop() private msg!: string;
}
</script>

Parent.ts

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

@Component
export default class Parent extends Vue {
    public value: string = '';
}

Everything is working fine.

But for my specific case, I would like to have abstract methods in Parent, so I'm making Parent class abstract itself. But as soon as I make Parent abstract, I get the following errors:

ERROR in WebstormProjects/untitled1/src/App.vue
13:3 Argument of type '{ components: { HelloWorld: typeof HelloWorld; }; }' is not assignable to parameter of type 'VueClass<Vue>'.
  Object literal may only specify known properties, but 'components' does not exist in type 'VueClass<Vue>'. Did you mean to write 'component'?
    11 | 
    12 | @Component({
  > 13 |   components: {
       |   ^
    14 |     HelloWorld,
    15 |   },
    16 | })
ERROR in WebstormProjects/untitled1/src/components/HelloWorld.vue
11:1 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 HelloWorld'.
    Type '<VC extends VueClass<Vue>>(target: VC) => VC' provides no match for the signature 'new (): HelloWorld'.
     9 | import Parent from '@/components/Parent';
    10 | 
  > 11 | @Component
       | ^
    12 | export default class HelloWorld extends Mixins(Parent) {
    13 |   @Prop() private msg!: string;
    14 | }
ERROR in WebstormProjects/untitled1/src/components/HelloWorld.vue
12:48 Argument of type 'typeof Parent' is not assignable to parameter of type 'VueClass<Parent>'.
  Type 'typeof Parent' is not assignable to type 'new (...args: any[]) => Parent & Vue'.
    Cannot assign an abstract constructor type to a non-abstract constructor type.
    10 | 
    11 | @Component
  > 12 | export default class HelloWorld extends Mixins(Parent) {
       |                                                ^
    13 |   @Prop() private msg!: string;
    14 | }
    15 | </script>
ERROR in WebstormProjects/untitled1/src/components/Parent.ts
3: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 Parent': extend, nextTick, set, delete, and 9 more.
    1 | import { Component, Vue } from 'vue-property-decorator';
    2 | 
  > 3 | @Component
      | ^
    4 | export default abstract class Parent extends Vue {
    5 |     public value: string = '';
    6 | }

Does it mean I cannot make my Mixin abstract?

@ktsn
Copy link
Member

ktsn commented Jun 12, 2019

This is won't fix as we cannot detect whether the class is Vue constructor without new (): V signature.

@ktsn ktsn closed this as completed Jun 12, 2019
@ktsn ktsn added the wontfix label Jun 12, 2019
@ktsn
Copy link
Member

ktsn commented Jun 12, 2019

#91

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants