Question

我尝试使用vue-injector，但是它可以与我的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 already provides DI起，使用自己的DI代替Inversify之类的第三方库可能会更方便。

Answer 2

您可以尝试使用此vue-injector

使用Vue和Typescript

2 个答案: