Búsqueda de sitios web

typescript - Nuxt 3 extender el tipo NuxtApp con plugins personalizados

Cuando proporciono un plugin a nuxtApp, conoce su tipo

pero cuando intento usarlo en la página solo muestra el tipo "any"

¿Puedo añadir tipos para extender el tipo NuxtApp manualmente? ¿O qué puedo hacer para que reconozca el tipo correcto del plugin?

Pienso en algo así

import type { order } from '~/plugins/order'

interface PluginsInjections {
  $order: ReturnType<order>
}

declare global {
  interface NuxtApp extends PluginsInjections {}
}

Respuesta #1

Lo resolví

Busqué cómo se hace en el complemento i18n

y hice lo mismo por mí mismo en types/index.d.ts

import type { order } from '~/plugins/order'

interface PluginsInjections {
  $order: ReturnType<typeof order>
}

declare module '#app' {
  interface NuxtApp extends PluginsInjections {}
}

declare module 'nuxt/dist/app/nuxt' {
  interface NuxtApp extends PluginsInjections {}
}

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties extends PluginsInjections {}
}

ahora sabe que el complemento existe y ayuda con el autocompletado

Respuesta #2

No deberías necesitar agregar manualmente tipos para propiedades y funciones inyectadas por los plugins, ya que se supone que funciona automáticamente como se explica en la documentación: https://nuxt.com/docs/guide/directory-structure/plugins#typing-plugins. En su lugar, deberías investigar por qué la detección automática no está funcionando como se espera.

Los casos de uso más avanzados pueden requerir que defina manualmente los tipos de las propiedades inyectadas. En ese caso, puede seguir este ejemplo:

// Your plugin
export default defineNuxtPlugin(() => {
  return {
    provide: {
      hello: (msg: string) => `Hello ${msg}!`
    }
  }
})

// index.d.ts
declare module '#app' {
  interface NuxtApp {
    $hello (msg: string): string
  }
}

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $hello (msg: string): string
  }
}

export { }

desde: https://nuxt.com/docs/guide/directory-structure/plugins#advanced

Pero recuerda que hacer esto enmascara las consecuencias de otro problema en tu base de código en lugar de resolver la causa raíz.

Artículos relacionados