使用TypeScript检查简单的Vue.js应用程序类型

Question

Vue.js附带正式的TypeScript类型定义，它们随着NPM一起安装在库中。

我想用它们键入检查一个简单的应用程序。所有我发现展示的组件使用打字稿，但我无法找到一个方法来输入检查简单的应用程序，如样品：

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

我想，主要的挑战是，所有的数据，方法，计算的属性等，都应在this上可用。但是在这种情况下，this的类型为Vue，并且不包含items属性。

有没有办法解决这个问题？

Answer 1

像这样的事情也许会有帮助，我不是太熟悉VueJS但尝试这种

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> 

另一种方法是使用对依赖

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