javascript - Creación de plugins personalizados con TypeScript en Nuxt

En mi proyecto Nuxt, creé un archivo de plugin personalizado que devuelve un objeto. /helpers/settings:

export const settings = {
  baseURL: 'https://my-site.com',
  ...
};

Registro este archivo en /plugins/settings.ts:

import Vue from 'vue';
import { settings } from '~/helpers/settings';

Vue.prototype.$settings = settings;

Y en nuxt.config.js:

export default {
  ...
  plugins: [
    '~/plugins/settings',

Luego, en un componente, puedo usar mi complemento así:

export default Vue.extend({
  data() {
    return {
      url: `${this.$settings.baseURL}/some-path`,

Todo funciona como se esperaba, excepto que en mi consola, obtengo un error de TypeScript en la línea en la que me refiero a mi plugin en mi componente:

Property '$settings' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.

De ahí mi pregunta: ¿cuál es la manera correcta de aplicar un tipo a mi complemento personalizado para que no reciba este error cada vez que lo uso?

Respuesta #1

Según la documentación, necesitarás aumentar el archivo de tipos para Vue.

Coloca el siguiente código en un archivo llamado plugin-types.d.ts.

// 1. Make sure to import 'vue' before declaring augmented types
import Vue from 'vue'

// 2. Specify a file with the types you want to augment
//    Vue has the constructor type in types/vue.d.ts
declare module 'vue/types/vue' {
  // 3. Declare augmentation for Vue
  interface Vue {
    $settings: string
  }
}

Respuesta #2

Esta respuesta también funciona, pero encontré una manera más fácil, aunque más sucia, de solucionarlo sin la necesidad de agregar el archivo plugin-types.d.ts.

Simplemente agrega una propiedad a tu componente con el nombre del plugin como sigue:

@Component
export default class YourComponent extends Vue {
  private $settings!: string; // your plugin here
  private url: string = `${this.$settings.baseURL}/some-path`
}