Can't use @Component on TypeScript abstract component class

[Toilal]

I wrote an abstract common class that extends Vue where I want to put some common logic, including some hook methods like created(), but those methods are not invoked by the framework.

Here's the abstract class implementing created().

abstract class DataEditorVue<T extends AbstractData> extends Vue {
  creation: boolean = false;
  data: T = null;

  created() {
    if (!this.data) {

      this.data = this.buildDataInstance();
    }
  }

  abstract buildDataInstance(): T;

  abstract getApiResource(): AbstractDataResource<T>;

  abstract getRouterPath(data: T): string;

  abstract getRouterPathAfterDeletion(data: T): string;

  remove() {
    return this.getApiResource().deleteFromObject(this.data).then(() => {
      return this.$router.push(this.getRouterPathAfterDeletion(this.data));
    });
  }

  create() {
    return this.getApiResource().create(this.data).then((data) => {
      return this.$router.push(this.getRouterPath(data), () => {
        this.creation = false;
        this.data = data;
      });
    });
  }

  update() {
    return this.getApiResource().update(this.data);
  }
}

Here the concrete class, extending abstract one.

@WithRender
@Component({
  components: {EditorControls}
})
class ObservationMilieuVue extends DataEditorVue<ObservationMilieu> {
  @Inject('observationTaxonResource')
  dataResource: ObservationTaxonResource;

  buildDataInstance(): ObservationMilieu {
    let data = new ObservationMilieu();
    data.localisation = {id: this.$route.params.localisationId};
    return data;
  }

  getApiResource(): ObservationTaxonResource {
    return this.dataResource;
  }

  getRouterPath(data: ObservationMilieu): string {
    return `/localisation/${data.localisation.id}/observation-milieu/${data.id}`;
  }

  getRouterPathAfterDeletion(data: ObservationMilieu): string {
    return `/localisation/${data.localisation.id}`;
  }
};

My actual workaround is to add a created() method in concrete class to invoke super.created() manually.

[HerringtonDarkholme]

You also need to annotate your parent class with @Component. See https://github.com/vuejs/vue-class-component/blob/master/test/test.ts#L168-L189

vue-class-component will resolve your component inheritance only if all components are annotated.

[Toilal]

I tried to do this, but the abstract class has a generic type, and it seems @component doesn't support this (I use TypeScript).

[Toilal]

Well in fact, problem is not caused by the generic type, but it's caused by the fact the class is abstract.

[Toilal]

It works when removing abstract keyword from class, and implementing previous abstract methods with errors. But it's a lose of some TypeScript compile-time checking here :(

@Component
class DataEditorVue<T extends AbstractData> extends Vue {
  creation: boolean = false;
  data: T = null;

  created() {
    if (!this.data) {
      this.creation = true;
      this.data = this.buildDataInstance();
    }
  }

  buildDataInstance(): T {
    throw new Error('Not implemented !');
  };

  getApiResource(): AbstractDataResource<T> {
    throw new Error('Not implemented !');
  };

  getRouterPath(data: T): string {
    throw new Error('Not implemented !');
  };

  getRouterPathAfterDeletion(data: T): string {
    throw new Error('Not implemented !');
  };

  remove() {
    return this.getApiResource().deleteFromObject(this.data).then(() => {
      return this.$router.push(this.getRouterPathAfterDeletion(this.data));
    });
  }

  create() {
    return this.getApiResource().create(this.data).then((data) => {
      return this.$router.push(this.getRouterPath(data), () => {
        this.creation = false;
        this.data = data;
      });
    });
  }

  update() {
    return this.getApiResource().update(this.data);
  }
}

Do you think it could be possible to make it work with my first proposal for TypeScript users ?

[HerringtonDarkholme]

https://github.com/vuejs/vue-class-component/blob/master/src/declarations.ts#L3

{new(): Vue} will cause abstract class to fail compiling.

I would recommend you to use mixin with interface instead of abstract class.

[Toilal]

I see ! Thanks for help, i'll have a look to mixins.

[JsonSong89]

Hi,@HerringtonDarkholme thanks for your sharing .
bug If I have already extends a class , any way can use mixin with type check?
I define a Component class

@Component
class HelloTrait extends Vue {
    sayHi(name: string): void {
        alert(`Hi ${name}! this from HelloTrait`)
    }
}

and mixin it ,

@Component({
    components: {"test-slot": testSlot},
    mixins: [HelloTrait]
})
class SorterList2VC extends BaseVueList<Sorter> {
    test2() {
        this.sayHi("json")
    }

the function can work fine , but type check show a error

Is there any way to resolve the error except this?

[HerringtonDarkholme]

@178220709 You simply need a util function Mixin.

Example:
https://github.com/HerringtonDarkholme/av-ts/blob/master/src/functions.ts
https://github.com/HerringtonDarkholme/av-ts#mixin-examples

[JsonSong89]

@HerringtonDarkholme
This is Great and I like it , thank you .
Maybe you can consider extracts it as a single project.
It is so convenience.

[304NotModified]

I'm confused. To use the mixing function, we need to switch to av-ts?

[JsonSong89]

@304NotModified you also can use mixin in this project .

/**
 * Created by jsons on 2017/5/27.
 */
import {Vue} from 'vue/types/vue'

import {ComponentOptions, FunctionalComponentOptions} from 'vue/types/options'

import {componentFactory} from "vue-class-component/lib/component";


function ComponentForMixin<V, U extends Vue>(options: ComponentOptions<U> | V): any {
    if (typeof options === 'function') {
        return componentFactory(options as any)
    }
    return function (Component: V) {
        return componentFactory(Component as any, options)
    }
}

type VClass<T extends Vue> = {
    new(): T
    extend(option: ComponentOptions<Vue> | FunctionalComponentOptions): typeof Vue
}

function Mixin<T extends Vue>(parent: typeof Vue, ...traits: (typeof Vue)[]): VClass<T> {
    return parent.extend({mixins: traits}) as any
}
export {ComponentForMixin, Mixin}

and use by this

import {Component, ComponentForMixin, Vue, Mixin} from "typings/base"


declare interface ApplePenTrait extends Pen, Apple, TestClass3 {
}
@Component
class Pen extends Vue {
    havePen() {
        alert('I have a pen')
    }
}
@Component
class Apple extends Vue {
    haveApple() {
        alert('I have an apple')
    }
}

@Component
class TestClass3 extends Vue {
    str3 = "TestClass3"
}

// compiles under TS2.2
@ComponentForMixin({
    template: `<span @click="Uh"> click show</span>`
})
export default class ApplePen extends Mixin<ApplePenTrait>(Apple, Pen, TestClass3) {
    havePen() {
        alert('I have a  pen (ApplePen)')
    }

    Uh() {
        this.havePen()
        this.haveApple()
        alert(this.str3)
    }
}

the idea is copy from @HerringtonDarkholme 's av-ts .
thanks him !

[304NotModified]

Thanks!

Update got it working,

Unfortunate I can't get it working.

I have this now:

the file ComponentForMixin.ts, which the class Mixin etc

In file myfile.ts:

import { Component, Prop, Watch } from "vue-property-decorator"
import { ComponentForMixin, Mixin } from "./ComponentForMixin"

NB: I can't use

import { ComponentForMixin, Mixin, Vue, Component } from "./ComponentForMixin"

as ComponentForMixin.ts isn't exporting those?

also, I didn't needed declare on the ApplePenTrait

[304NotModified]

To be clear, an abstract Mixin isn't working?