Question

Vue.js附带了使用NPM在库中安装的官方TypeScript类型定义。

我正在尝试使用它们来键入检查一个简单的应用程序。我发现的所有示例都演示了在组件中使用TypeScript，但我找不到一种方法来键入检查一个简单的应用程序，如：

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

使用TypeScript键入检查简单的Vue.js应用程序

1 个答案: