Type checking a simple Vue.js app with TypeScript

Question

Vue.js comes with official TypeScript type definitions that are installed along the library with NPM.

I am trying to use them to type check a simple app. All of the samples I've found demonstrate the use of TypeScript in components but I couldn't find a way to type check a simple app like:

import * as Vue from 'vue';

interface Item {
    name: string;
}

var app = new Vue({
  el: '#app',
  data: {
    items: <Item[]> []
  },
  methods: {
    addItem: function () {
      this.items.push({ name: 'Item' });
    }
  }
});

I guess that the main challenge is that all the data, methods, computed properties, etc., should all be available on this. However in this case, this is of type Vue and does not contain an items property.

Is there a way to pull this off?

Xavier Poinas · Accepted Answer · 2017-04-17 04:08:33Z

3

Something like this might help, I am not too familiar with VueJS but try this

import * as Vue from 'vue';

interface Item {
   name: string;
}

interface App extends Vue {
   items: Item[];
}

export default {
  el: '#app',
  data: {
    items: <Item[]> []
  },
  methods: {
    addItem: function () {
      this.items.push({ name: 'Item' });
    }
  }
} as ComponentOptions<App>

The alternative is using a peer dependency

import Vue from 'vue'
import Component from 'vue-class-component'
// The @Component decorator indicates the class is a Vue component
@Component({
  // All component options are allowed in here
  el: '#app' //... rest of your options
})
export default class Item extends Vue {
  // Initial data can be declared as instance properties
  items: <Item[]> []
  // Component methods can be declared as instance methods
  addItem (): void {
    this.items.push({name: 'Item' });
  }
}

edited Apr 17, 2017 at 4:08

Xavier Poinas

19.8k14 gold badges68 silver badges98 bronze badges

answered Apr 13, 2017 at 10:49

Byrd

9073 gold badges14 silver badges24 bronze badges

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

2 Comments

Xavier Poinas Over a year ago

Thanks! I had to adjust the 1st example to make it work (see my edit). However, the 2nd one didn't work for me. I don't have a 'vue-class-component' module to import from, and when I try import Component from 'vue', the compiler complains that Component is not callable.

Byrd Over a year ago

Yeah for the second example you'd need to npm install it. The first example has some shortcomings.

Collectives™ on Stack Overflow

Type checking a simple Vue.js app with TypeScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related