Vue3 Setup中如何同时使用带TypeScript的defineProps与默认值？

在Vue3中，你不能同时混用defineProps的泛型类型声明和选项式配置（也就是你现在写的传对象带default的方式），这两种写法是互斥的，所以会触发TS错误。下面是两种可行的解决方式：

方法1：使用withDefaults宏（官方推荐） #

Vue3提供了withDefaults宏，专门用来给基于TS类型定义的props设置默认值，完美适配你的需求：

<script setup lang="ts">
const props = withDefaults(defineProps<{
  type?: string
  color?: 'color-primary' | 'color-danger' | 'color-plain'
}>(), {
  type: 'plain',
  color: 'color-plain'
})
</script>

注意这里可以把类型里的| undefined去掉，因为withDefaults会自动处理可选属性的默认值，TS能识别到这些属性最终会有值（要么传进来，要么用默认值）。

方法2：使用选项式写法（不使用泛型） #

如果不想用withDefaults，也可以直接在defineProps的选项里同时声明类型和默认值，这种写法不需要泛型：

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

const props = defineProps({
  type: {
    type: String,
    default: 'plain'
  },
  color: {
    type: String as PropType<'color-primary' | 'color-danger' | 'color-plain'>,
    default: 'color-plain'
  }
})
</script>

这里需要用PropType来给color指定联合类型，确保TS能正确识别其类型范围。

为什么原来的写法会报错？ #

Vue3的defineProps设计上只支持两种写法：

1. 仅泛型类型声明：defineProps<{ ... }>()
2. 仅选项式配置：defineProps({ ... })
   混合使用这两种方式会让TS类型检查逻辑冲突，所以触发错误。

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