typescript - Vue Component Props 上的数组类型破坏了 Linter

Question

我正在使用 Vue.extend 创建一个带有 Array prop 的 AppProps 类...

import Vue from 'vue';
import Component from 'vue-class-component';

const AppProps = Vue.extend({
  props: {
    test1: String,
    test2: Array,
  },
});

然后扩展 AppProps 来创建我的组件..

@Component({})
export default class ArrayPropsExample extends AppProps {
  get computedMessage() {
    return this.test1 + ' ' + this.test2;
  }
}

这是 vue-class-component 中的 typescript 示例。 Vue 很高兴，但 linter 提示它在类里面看不到我的 Prop 类型......

19:17 Property 'test1' does not exist on type 'ArrayPropsExample'. 17 | export default class ArrayPropsExample extends AppProps { 18 | get computedMessage() {

19 | return this.test1 + ' ' + this.test2; | ^ 20 | } 21 | }

相关代码在这里(https://github.com/JavascriptMick/vue-d3-poc/blob/master/src/components/ArrayPropsExample.vue)

如果我将 test2 类型设置为 String，linter 会很高兴，但使用 Array 似乎会破坏 linter..这很奇怪且不一致

Answer 1

好的，所以我能够通过改变我的方法解决这个问题。本质上是引入 vue-property-decorator 并在我的 tsconfig 中设置 script=false...

import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop } from 'vue-property-decorator';

@Component
export default class ArrayPropsExample extends Vue {
  @Prop({ default: 'hello' })
  public test1: string;

  @Prop({ default: []})
  public test2: any[];

  get computedMessage() {
    return this.test1 + ' ' + this.test2;
  }
}

无论如何我更喜欢这种方法。