1

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

以下是我的组件代码：

<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 {...吗？

4

1 回答 1

0

我不完全确定我是如何错过这一点的，或者这感觉有多可持续，但找到了解决方案。

诀窍是使用@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>
于 2019-11-27T15:29:56.733 回答