VSCode and Vue 2 plugin TypeScript definitions

Question

I'm using VSCode and TypeScript classes for Vue 2 component development. See: vuejs/vue-class-component.

In my current project I use plugins like vue-i18n for translations of labels etc. These plugins extend the Vue components with their own functions like this.$t(...) to get a translation by key, but VSCode doesn't recognize / doesn't no off these extensions (or are they mixins?) etc.

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

Answer 1

This issue is solved now and documented in the Vue TypeScript documentation. It's called "Augmenting Types for Use with Plugins".

The following snippet is from 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
  }
}