在打字稿中的基于 Vue 类的组件中键入 prop

Posted 2023-02-22

【中文标题】在打字稿中的基于 Vue 类的组件中键入 prop

【英文标题】：typing prop in Vue class-based component in typescript

【发布时间】：2020-03-23 04:42:03

【问题描述】：

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

以下是我的组件代码：

<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 ... 中再次输入它们之外，还有其他方法吗？

【参考方案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>