Vue.js 打字稿界面不起作用

Question

有谁知道在 vue.js 中为数据属性创建类型的语法是什么（应用程序是用打字稿编写的）？我正在寻找类似的东西：

@Component({
  data() {
    return {
      sections: Array<SomeInterface> = []
    }
  }
})

但是 vue 将类型视为一个值，我很困惑如何处理它。

Answer 1

您不能:像往常一样在类型之前使用，因为语法与 JavaScript 的key: value对象字面量语法冲突。您可以通过强制空数组[]为SomeInterface[]类型来使用类型推断：

@Component({
  data() {
    return {
      sections: [] as SomeInterface[]
    }
  }
})

Answer 2

您应该使用类样式组件vue-class-component，它允许您将这些声明移动到类属性并与 Typescript 配合良好。

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
  template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
  // Initial data can be declared as instance properties
  message: string = 'Hello!'

  // Component methods can be declared as instance methods
  onClick (): void {
    window.alert(this.message)
  }
}