Vue-class-component: Using this with Inversify and Typescript

[d1820]

Im using the @Component decorator just fine when running a pure Vue application. When i try to add in the use of a constructor i get the following error

Severity Code Description Project File Line Suppression State
Error TS1238 (TS) Unable to resolve signature of class decorator when called as an expression.
Type '(target: V) => V' is not assignable to type 'typeof CounterComponent'.
Property 'config' is missing in type '(target: V) => V'. Marketplace.Web.ServiceFabric (tsconfig project) C:\Dev\GeniusAvenue\Marketplace-Web-Consumer\Marketplace.Web.ServiceFabric\ClientApp\components\counter\counter.ts 7 Active

Not sure how I can properly reference a valid config at this point.

import Vue from 'vue';
import Component from 'vue-class-component';
import { INJECTION_TYPES } from 'kernel';
import { inject } from 'inversify';
import { IProductService } from 'interfaces';

@Component
export default class CounterComponent extends Vue {

    currentcount = 0;

    public constructor( @inject(INJECTION_TYPES.ProductService) _productService: IProductService) {
        super();
        console.log(_productService);
    }

    incrementCounter() {
        this.currentcount++;
    }
}

Any help would be appreciated. Trying to find good info on using Vue, vue-class-component, and Inversify, and Typescript all together is very limited/non-existent.

[HerringtonDarkholme]

Sadly, I guess inversify, at least the constructor flavor, won't work with Vue.

The problem is Vue instance is newed by the framework. And the framework doesn't pass any thing to the constructor.

[ktsn]

I guess we could use Inversify with vue-class-component if we allow to replace this line with user defined factory function so that the user can build the instance from the Inversify container.

But I'm not sure how the API should look like to allow that 😞

[d1820]

I'll have to dig into the code see if I can see an extension point to do it 👍. in the mean time I have switched to using property injection to get around the block.

[d1820]

I am wondering if a parameter decorator would do it? add an outer one to each param, they are collected and reapplied when doing new Componet

[eshimischi]

Hi, check here Inject in Vue and here How to resolve..

[ktsn]

I found this can be implemented as the user land decorator. We can provide Inversify container by using Vue's provide/inject feature. Then write a decorator to obtain a dependency by using vue-class-component's createDecorator.

Thanks @eshimischi for sharing the hint!

PoC is here: https://github.com/ktsn/vue-inversify-decorator

BTW, I do not recommend to use constructor of class component since it is invoked in vue-class-component and may cause unexpected behavior.

[ffMathy]

I made a plugin which makes constructor-based and type-inferred dependency injection possible:
https://medium.com/@mathiaslykkegaardlorenzen/enabling-constructor-based-dependency-injection-in-vue-js-using-typescript-850113d29cfc