带有组合 API 和 TypeScript 的 Vue 3 注入插件答案

【问题标题】：Vue 3 Inject Plugin with Composition API and TypeScript带有组合 API 和 TypeScript 的 Vue 3 注入插件
【发布时间】：2021-05-10 01:39:39
【问题描述】：

我创建了一个 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)

【问题讨论】：

我认为你应该在这里添加 undefined export const provider = (): IProvider | undefined => ({
@BoussadjraBrahim 我得到了完全相同的错误：type 'IProvider | undefined' is not assignable to type 'IProvider'. Type 'undefined' is not assignable to type 'IProvider'.Vetur(2322)

标签： typescript vue.js vuejs3

【解决方案1】：

我通过Type-safe Vue.js Injections 解决了我的问题

需要注意的一点是，inject 函数会生成与undefined 联合的已解析类型。这是因为存在注入未解决的可能性。由你决定如何处理它。

所以为了处理undefined，我按照他的建议创建了一个injectStrict 函数。这是我的最终代码：

Component.vue

import { IProvider } from '@/core'
import { injectStrict } from '@/ui/utils'
import { onMounted, ref, defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const controllers: IProvider = injectStrict('controllers')
    const user = ref()
    const getUser = async () => {
      const result = await controllers.users.getById(1)
      if (result) {
        user.value = result.toObj()
      }
    }

    onMounted(getUser)

    return {
      user,
      getUser
    }
  }
})

@/utils/injections.ts

import { inject } from 'vue'

function injectStrict<T>(key: string, fallback?: T) {
  const resolved = inject(key, fallback)
  if (!resolved) {
    throw new Error(`Could not resolve ${key}`)
  }

  return resolved
}

export { injectStrict }

【讨论】：