Vue3 + TS 写移动端组件时 props 类型报错怎么办？

UX奕森提问于 2026-03-14 20:25:20 阅读 46

移动

我在用 Vue3 和 TypeScript 开发一个移动端按钮组件，给 props 定义了类型，但控制台一直报“类型不匹配”的警告。明明传的是字符串，却提示期望是 string | undefined，这咋回事？

试过加 required: true 也没用，是不是写法有问题？

<script setup lang="ts">
interface Props {
  variant: 'primary' | 'secondary'
}
const props = defineProps<Props>()
</script>

<template>
  <button :class="btn-${props.variant}">点我</button>
</template>

类型系统

我来解答赞 6 收藏

反馈

1 条解答

纪娜🍀 Lv1

兄弟，你这个问题的根源在于 TypeScript 的严格空值检查。

你定义 variant: 'primary' | 'secondary'，但没给默认值的情况下，TS 会自动把它变成 variant?: 'primary' | 'secondary'，也就是 'primary' | 'secondary' | undefined。

解决方法很简单，加个默认值就行：

<script setup lang="ts">

interface Props {

  variant?: 'primary' | 'secondary'

}



const props = withDefaults(defineProps<Props>(), {

  variant: 'primary'

})

</script>

或者如果你不想用 withDefaults，直接在接口里加个问号让它可选，然后在模板里做兼容处理也行，不过 withDefaults 是 Vue3.3+ 的官方推荐写法，更规范。

另外提醒一下，模板里写 :class="btn-${props.variant}" 会有个问题，如果 variant 是 undefined，类名会变成 btn-undefined，你可能需要处理一下这种情况。或者直接用计算属性会更稳：

const btnClass = computed(() => btn-${props.variant})

然后模板里用 :class="btnClass" 就完事儿。

2026-03-16 15:21