HablemosDeVueJS / doctor-vue

Resolución de problemas que ocurren al desarrollar en VueJS
2 stars 1 forks source link

¿Cómo puedo sobre escribir el type de un plugin (vuei18n)? #4

Closed aRendonC closed 4 years ago

aRendonC commented 4 years ago

Estoy usando vue-i18n, este trae sus types en su carpeta de la manera

Types plugin vue-i18n

"declare module 'vue/types/vue' {
    interface Vue {
      readonly $i18n: VueI18n & IVueI18n;
      $t: typeof VueI18n.prototype.t;
      $tc: typeof VueI18n.prototype.tc;
      $te: typeof VueI18n.prototype.te;
      $d: typeof VueI18n.prototype.d;
      $n: typeof VueI18n.prototype.n;
    }"

ahora, estoy intentando añadirle un type nuevo de contexto para poder agregar una propiedad de vm a estos tipes de la siguiente manera

Mis types

import { Context } from 'vm';

declare module 'vue/types/vue' {
  interface Vue {
    localePath(route: RawLocation, locale?: string): string
    switchLocalePath(locale: string): string
    getRouteBaseName(route?: RawLocation): string
    $nuxtI18nSeo(): NuxtI18nSeo
    // PHPStorm without this indicates that "$i18n" was not found.
    readonly $i18n: VueI18n & IVueI18n & Context;
    $t: typeof VueI18n.prototype.t;
    $tc: typeof VueI18n.prototype.tc;
    $te: typeof VueI18n.prototype.te;
    $d: typeof VueI18n.prototype.d;
    $n: typeof VueI18n.prototype.n;
  }
}

esto viene causando un error que me indica que no puedo pasarle más typos a la interface con el siguiente enunciado la líena que sobre escribo es

readonly $i18n: VueI18n & IVueI18n & Context;

Subsequent property declarations must have the same type. Property '$i18n' must be of type 'VueI18n & IVueI18n', but here has type 'VueI18n & IVueI18n & Context'.

tengo mis types en un archivo donde sobre escribo los types de los plugins que requiero, pero este no me deja hacerlo

Gracias de antemano!

rolandoesc commented 4 years ago

¿No te serviría usar un union?

readonly $i18n: VueI18n & IVueI18n | Context

aRendonC commented 4 years ago

¿No te serviría usar un union?

readonly $i18n: VueI18n & IVueI18n | Context

No podría hacerse esto ya que igualmente se está infiriendo a que sólo se recibe esos dos tipos y se le está agregando uno nuevo.

LissetteIbnz commented 4 years ago

Para los que lleguen aquí con el mismo problema. Puedes decirle a TypeScript donde buscar los tipos cuando haces un import de algo.

* Dentro del tsconfig.json

{
  "compilerOptions": {
···
    "paths": {
      "vuex": [
        "src/store/typings/index.d.ts",
        "src/store/typings/helpers.d.ts",
        "src/store/typings/vue.d.ts",
        "src/store/typings/utils.d.ts"
      ]
    },

En este caso, estoy diciendo que cuando haga un import Vuex from "vuex" busque los tipos en esos ficheros que he agregado. Es importante el orden de los ficheros. Es decir, si vue.d.ts depende de algo en helpers.d.ts, helpers.d.ts debe ponerse antes

rolandoesc commented 4 years ago

@aRendonC indicó que lo que le sugirió @LissetteIbnz fue la solución, se cierra el issue. :)