# 属性类型声明

有时,您需要在类组件之外定义组件属性和方法。例如,Vuex,Vue 的官方状态管理库,提供了 mapGettersmapActions 帮助程序来将存储映射到组件属性和方法。这些帮助程序需要在组件选项对象中使用。

即使在这种情况下,您也可以将组件选项传递给 @Component 装饰器的参数。但是,它不会在类型级别自动声明属性和方法,而它们在运行时有效。

您需要在类组件中手动声明它们的类型

import Vue from 'vue'
import Component from 'vue-class-component'
import { mapGetters, mapActions } from 'vuex'

// Interface of post
import { Post } from './post'

@Component({
  computed: mapGetters([
    'posts'
  ]),

  methods: mapActions([
    'fetchPosts'
  ])
})
export default class Posts extends Vue {
  // Declare mapped getters and actions on type level.
  // You may need to add `!` after the property name
  // to avoid compilation error (definite assignment assertion).

  // Type the mapped posts getter.
  posts!: Post[]

  // Type the mapped fetchPosts action.
  fetchPosts!: () => Promise<void>

  mounted() {
    // Use the mapped getter and action.
    this.fetchPosts().then(() => {
      console.log(this.posts)
    })
  }
}