Typing custom plugin

[mrc-bsllt]

Hello everyone! I have created a custom plugin and through provide/inject I call it up in my components, but I cannot get it to remain typecast.

plugin.ts

import type { App } from 'vue'
import { ApiClient } from '@mondaydotcomorg/api'

interface MondayOptions {
  apiKey: string
}

export default {
  install: (app: App, options?: MondayOptions) => {
    const apiKey = options?.apiKey || import.meta.env.VITE_MONDAY_API_KEY

    const client = new ApiClient(apiKey)

    app.provide('mondayClient', client)
  }
}

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import MondayApiClientPlugin from './plugins/monday-api'
import PrimeVue from 'primevue/config'

import './assets/main.css'

const app = createApp(App)

app.use(MondayApiClientPlugin)
app.use(PrimeVue, {
  unstyled: true
})

app.mount('#app')

App.vue

<script setup lang="ts">
import { onMounted, inject } from 'vue'

const mondayClient = inject('mondayClient')
onMounted(async () => {
  const me = await mondayClient.operations.getMeOp()
  console.log('me', me)
})
</script>

<template>
  <main></main>
</template>

I know I could add the type to inject const mondayClient = inject<ApiClient>('mondayClient') , but I would like not to have to do this in all the components where I have imported it.

[TheNoim]

You can write a composable for this:

import { inject } from 'vue'

export function useMondayApiClient() {
   return inject<ApiClient>('mondayClient');
}

<script setup lang="ts">
import { onMounted, inject } from 'vue'
import { useMondayApiClient } from '...'

const mondayClient = useMondayApiClient()
onMounted(async () => {
  const me = await mondayClient.operations.getMeOp()
  console.log('me', me)
})
</script>

<template>
  <main></main>
</template>

[yuvalkarif]

For anyone looking here, the best practice is according to the docs is to use the InjectionKey generic type from 'vue' https://vuejs.org/guide/typescript/composition-api.html#typing-provide-inject.

import type { App } from 'vue'
import { ApiClient } from '@mondaydotcomorg/api'

interface MondayOptions {
  apiKey: string
}

export default {
  install: (app: App, options?: MondayOptions) => {
    const apiKey = options?.apiKey || import.meta.env.VITE_MONDAY_API_KEY

    const client = new ApiClient(apiKey)
    const key = Symbol(''mondayClient") as InjectionKey<typeof client>
    app.provide(key , client)
  }
}