Typ, der eine einfache Vue.js App mit TypeScript überprüft

Question

Vue.js wird mit offiziellen TypeScript-Typdefinitionen geliefert, die zusammen mit NPM in der Bibliothek installiert werden.

Ich versuche, sie zu verwenden, um eine einfache App zu überprüfen. Alle Proben ich gefunden habe, die Verwendung von Typoskript in Komponenten zeigen, aber ich konnte nicht einen Weg zu geben überprüft eine einfache App wie finden:

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' }); 
    } 
    } 
}); 

Ich denke, dass die größte Herausforderung ist, dass alle Daten, Methoden, berechnete Eigenschaften usw. sollten alle unter this verfügbar sein. In diesem Fall ist this jedoch vom Typ Vue und enthält keine items Eigenschaft.

Gibt es eine Möglichkeit, dies zu entfernen?

Answer 1

Etwas Ähnliches könnte helfen, ich bin nicht allzu vertraut mit VueJS aber versuchen, diese

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> 

Die Alternative einer Peer Abhängigkeit

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' }); 
    } 
}