VSCode and Vue 2 plugin TypeScript definitions

I use the VSCode and TypeScript classes to develop Vue 2 components. See: vuejs / vue-class-component .

In my current project, I use type plugins vue-i18nfor label translations, etc. These plugins extend Vue components with their own functions, such as this.$t(...)to get a key translation, but VSCode doesnโ€™t recognize / doesnโ€™t from these extensions (or are they mixins?), Etc.

How can I find out VSCode that these extension functions exist and intellisense starts working? Can I create my own * .d.ts files? And if so, how can I connect them so that VSCode can find them for intellisense? Any example is welcome. Or a link to some Github repo example where this is done?

+6
source share
2 answers

This issue has been resolved and documented in the Vue TypeScript documentation. It is called "Additional Types for Use with Plugins . "

The following snippet is provided on this page for quick reference:

// For example, to declare an instance property $myProperty with type string:

// 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 {
    $myProperty: string
  }
}
+2
source

vue-i18n does not provide its own TypeScript types.

DefinitelyTyped:

npm i -D @types/vue-i18n yarn add -D @types/vue-i18n

0

Source: https://habr.com/ru/post/1014686/


All Articles