[Vuejs]-How to make TypeScript "know" that a public instance property ($locale) is added to Vue?

by

0👍

✅

Here’s my partial solution:

  • to use import Localize from 'v-localize' instead of const Localize = require('v-localize') I added a file v-localize.d.ts like this:

      declare module 'v-localize' {
      export default function Localize (): any;
  }

    surely this is not a dedicated typing but is good enough for this particular task

  • to access .$locale in components and get type suggestions of its argument, I’ve introduced another file v-localize-vue.d.ts (module augmentation example):

      import Vue from 'vue'

  type localeArgument = {
      i: string
  }

  declare module 'vue/types/vue' {
      interface Vue {
          $locale: (a: localeArgument) => string
      }
  }

  • to remove the } as any); bit from the Vue options, I’ve added to v-localize-vue.d.ts (in accord with the same doc):

      declare module 'vue/types/options' {
      interface ComponentOptions<V extends Vue> {
          localize?: any
      }
  }

I call the solution "partial" since I use any in the first and the third bit and I haven’t digged whether my localeArgument type is accurate (perhaps the object can contain other fields and i is not required).

Leave a comment