Vue3 + TS 为 provide / inject 标注类型

Aug 23, 2022 · 5min

在使用socket.io的时候，为了方便复用，便做了Vue插件，然后用provide 和injectAPI做全局注入，然后就遇到了类型丢失的问题，在provide的时候还可以看到类型，但是inject的时候类型就丢失了

然后查看了Vue3文档，看到了一个InjectionKey接口: 为了正确地为注入的值标记类型，Vue 提供了一个 InjectionKey 接口，它是一个继承自 Symbol 的泛型类型，可以用来在提供者和消费者之间同步注入值的类型

类型 

// SocketInjectKey
import type { InjectionKey } from 'vue'
import type { Socket } from 'socket.io-client'

export const SocketInjectKey: InjectionKey<Socket> = Symbol('socket')

定义 

import type { App } from 'vue'
import { io } from 'socket.io-client'
import { SocketInjectKey } from '../types'

interface IO {
  connection: string
  options: any
}
export default {
  install: (app: App, { connection, options }: IO) => {
    const socket = io(connection, options)
    app.config.globalProperties.$socket = socket
    app.provide(SocketInjectKey, socket)
  }
}

使用 

import { SocketInjectKey } from '../types'

const socket = inject(SocketInjectKey)

socket?.emit('....')

为 provide / inject 标注类型 —— Vue3 中文文档


cd ..