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?

there are .d.ts files for vue, if you are looking for them you can find them here. npmjs.com/package/@types/vue — toskv
– toskv, Commented Feb 3, 2017 at 16:56
My question is about creating/using definition files for Vue 2 plugins which add custom functions to the Vue class. I know there are *.d.ts files for Vue itself, but those work fine. — Maarten Docter
– Maarten Docter, Commented Feb 6, 2017 at 16:10
you can extend those types if you want. Typescript interfaces are open ended, if you add more methods to them they should be picked up by the compiler. — toskv
– toskv, Commented Feb 6, 2017 at 16:54
I wrestled with the same issue and decided to try and add types vue-i18n repository. Work in progress branch is at github.com/aom/vue-i18n/tree/typescript-support — aarreoskari
– aarreoskari, Commented Mar 27, 2017 at 17:02
I also opened an issue at vue-i18n repository: github.com/kazupon/vue-i18n/issues/130 — aarreoskari
– aarreoskari, Commented Mar 27, 2017 at 17:12

tony19 · Accepted Answer · 2022-07-15 22:15:58Z

3

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
  }
}

edited Jul 15, 2022 at 22:15

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 16, 2018 at 16:21

Maarten Docter

1,0291 gold badge16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

score 0 · Accepted Answer · 2017-04-22 07:05:34Z

0

vue-i18n does not provide its own TypeScript types.

Instead, you can use DefinitelyTyped:

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

edited Apr 22, 2017 at 7:05

answered Apr 22, 2017 at 4:57

user2794285

1 Comment

mrun Over a year ago

Hi and welcome!You could significantly improve the quality of your answer by adding more details and explaining what these commands really do and why they answer the question.

Collectives™ on Stack Overflow

VSCode and Vue 2 plugin TypeScript definitions

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related