Vue 3 使用 Composition API 和 TypeScript 注入插件

Question

我创建了一个

controller

插件，可以在每个组件中全局使用，但我无法使其与 Vue 3 + TypeScript + Composition API 一起使用，我收到 TypeScript 错误

ui/plugins/controllers.ts

import { App } from 'vue'
import { provider, IProvider } from '@/core/presentation/provider'

export default {
  install: (app: App) => {
    const controllers: IProvider = provider()
    app.provide('controllers', controllers)
  }
}

main.ts

import { createApp } from 'vue'
import { controllers } from './ui'

createApp(App)
  .use(controllers)
  .mount('#app')

@/core/presentation/provider/provider.ts

import { UserController } from '../controllers'
import { IProvider } from './provider.types'

export const provider = (): IProvider => ({
  users: new UserController()
})

ui/views/Component.vue

import { onMounted, ref, inject, defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const controllers = inject('controllers')

    const user = ref()
    const getUser = async () => {
      const result = await controllers.users.getById(1)
      if (result) {
        user.value = result.toJson()
      }
    }

    onMounted(getUser)

    return {
      user,
      getUser
    }
  }
})

当我尝试在这一行使用控制器时，出现打字稿错误

const result = await controllers.users.getById(1)

错误：

const controllers: unknown
Object is of type 'unknown'.Vetur(2571)

如果我像这样使用界面设置类型，我会收到另一个打字稿错误

import { IProvider } from '@/core'
...
const controllers: IProvider  = inject('controllers')

错误：

type 'IProvider | undefined' is not assignable to type 'IProvider'.
Type 'undefined' is not assignable to type 'IProvider'.Vetur(2322)

我只能让它像这样工作，但我觉得这很奇怪：

const controllers: IProvider | undefined = inject('controllers')
...
const result = await controllers?.users.getById(1)

Answer 1

我设法通过发布类型安全的 Vue.js 注入来解决我的问题

有一件事要

Answer 2

如果你确定注入总是能够解决，你可以使用非空断言运算符：

const controllers: IProvider = inject('controllers')! // <- notice the exclamation mark!
const result = await controllers.users.getById(1)