Vue TypeScript中如何在计算属性中访问Props？

问题原因 #

1. 选项式API中，计算属性的函数内无法直接使用props变量，必须通过组件实例的this访问props属性。
2. 你定义的color prop为可选类型（String），在TS中类型为string | undefined，直接调用split()会因可能的undefined触发类型错误，导致你误以为this.color无效。

解决方案 #

方案1：将color设为必填项 #

如果color是组件必须接收的属性，给prop添加required: true，确保this.color类型为string，无需额外判断：

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    color: {
      type: String,
      required: true // 标记为必填
    },
    shape: String,
  },
  computed: {
    theme(): string {
      const args = this.color.split('-')
      return args[0]
    }  
  }
})
</script>

方案2：处理color为undefined的情况 #

如果color是可选的，在计算属性中先判断color是否存在，避免调用split()时出错：

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    color: String,
    shape: String,
  },
  computed: {
    theme(): string {
      // 若color未传入，返回默认值（这里用空字符串，可根据需求调整）
      if (!this.color) return ''
      const args = this.color.split('-')
      return args[0]
    }  
  }
})
</script>

额外说明 #

• 选项式API中，计算属性的函数不能用箭头函数，否则this不会指向组件实例，导致无法访问props。
• 若使用组合式API（<script setup lang="ts">），则可以直接通过解构defineProps()来访问props，写法如下供参考：

<script setup lang="ts">
const props = defineProps<{
  color?: string
  shape?: string
}>()

const theme = computed(() => {
  if (!props.color) return ''
  return props.color.split('-')[0]
})
</script>

内容的提问来源于stack exchange，提问作者Mohamad Abyannaufal