Question

在打字稿上下文中处理基于类的组件，并想知道我一直遇到的打字稿错误。

以下是我的组件代码：

<template>
  <b-message :type="statusToBuefyClass">
    <p>PLACEHOLDER</p>
  </b-message>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({
  components: {},
  props: {       <----------------- typed prop
    status: {
      type: String,
      required: false
    }
  }
})
export default class Foo extends Vue {

  // explicitly type status
  status!: string         <----------------- explicit, redundant typing

  get statusToBuefyClass(): string {
    const statusHash: {
      init: string
      active: string
      inactive: string
      archived: string
    } = {
      init: 'is-warning',
      active: 'is-success',
      inactive: '',
      archived: 'is-danger'
    }

    // return statusHash
    return Object(statusHash)[this.status]  <------ error is triggered by this
  }

  bar = this.status <------------- this would also error, if not explicitly typed above

  mounted() {}
}
</script>

上面的方法没有编译错误。但是，如果我删除了status-status!: string的显式键入，则会出现以下错误：

Property 'status' does not exist on type 'Foo'.

我发现了很多类似的文章和问题，但似乎没有一个完全符合我的情况。在我的tsconfig.json中，我设置了以下内容，其中一些建议的帖子可能会有所帮助：

"strict": true,
"noImplicitThis": true,

有什么想法或见解吗？除了传递道具然后在export default class Foo extends Vue {...内再次键入道具，还有其他选择吗？

Answer 1

我不确定我是如何想念这个的，或者这种感觉的可持续性，但是找到了解决方案。

把戏是使用@Prop装饰器。以下编译没有错误：

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
@Component({
  components: {}

  // <--------------- props removed from here...

})
export default class Foo extends Vue {

  @Prop(String) status!: string // <--------- use @Prop decorator to type and capture prop from parent

  get statusToBuefyClass(): string {
    const statusHash: {
      init: string
      active: string
      inactive: string
      archived: string
    } = {
      init: 'is-warning',
      active: 'is-success',
      inactive: '',
      archived: 'is-danger'
    }

    // return statusHash
    return Object(statusHash)[this.status] // <------- no more compilation errors here
  }

  mounted() {}
}
</script>

打字稿中基于Vue类的组件中的打字道具

1 个答案: