Реализация внедрения зависимостей с использованием Vue и Typescript

Question

Я пытался использовать vue-инжектор, но он компилируется с моими версиями Vue (2.6.10) и Typescript (3.4.5).

Я вижу очень мало других вариантов.

С чисто машинописной стороны я вижу такие вещи, как Inversify и TSyringe, которые хорошо выглядят, но не работают с Vue из коробки.

Это инверсия:

Argument of type typeof App' is not assignable to parameter of type 'VueClass<Vue>'. Type 'typeof App' is not assignable to type 'VueConstructor<Vue>'. Types of parameters 'authService' and 'options' are incompatible. Type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>' is missing the following properties from type 'AuthService': app, scopes, login, logout, getAccount

export default class App extends Vue {
  constructor(
    @inject(AuthService) authService: AuthService
  ) {
    super();
  }
}

Полагаю, мне нужно создать класс с правильной подписью, но прежде чем я исчезну в этой кроличьей норе, кто-нибудь имеет опыт работы с Vue / Typescript / DI и может указать мне разумное решение?

Answer 1

inject и т. Д. Декораторы нельзя использовать с классом компонента. Использование декораторов предполагает, что экземпляр класса создается с помощью инжектора Inversify, а класс компонента - с помощью инфраструктуры Vue, поэтому параметр, предоставленный конструктору компонента, не будет экземпляром AuthService. Об этом предупреждает ошибка типа.

Та же проблема применима к компонентам React или любой другой платформе, которая не использует Inversify для внутреннего использования.

Контейнер Inversify должен быть доступен вручную:

authService: AuthService = container.get(AuthService)

Поскольку Vue уже предоставляет DI , может быть удобнее использовать собственный DI вместо сторонней библиотеки, такой как Inversify.