Vue3+TS中defineProps类型报错：缺失type/color/disabled属性

错误原因分析 #

编译报错的核心问题有两点：

1. Props类型定义与默认值逻辑冲突：你在Button组件的defineProps类型声明中，将type、color、disabled标记为必填属性，但实际代码中通过解构赋值给了它们默认值，TypeScript类型检查会认为父组件不传这些属性违反类型规则。
2. 组件Ref类型错误：父组件中buttonRef定义为HTMLElement | null，但实际绑定的是组件实例（不是原生DOM元素），类型不匹配会导致后续方法调用的潜在问题。

解决方案 #

1. 修正Button组件的Props类型定义 #

将type、color、disabled改为可选属性（类型后加?），保留默认值逻辑，让TypeScript认可“属性可选且有默认值”的逻辑：

<script lang="ts" setup>
import { computed, ref } from 'vue';

const {
  type = 'button',
  color = 'primary',
  disabled = false
} = defineProps<{
  href?: string;
  type?: 'button' | 'submit' | 'reset';
  color?: string;
  disabled?: boolean;
}>();

const element = ref<HTMLElement | null>(null);

defineExpose({
  focus: () => {
    element.value?.focus();
  },
});

const style =
  'inline-flex justify-center rounded-sm shadow-sm px-3 py-2 text-sm font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus:outline focus:outline-2 focus:outline-offset-2';

const colors = new Map([
  [
    'primary',
    'bg-lime-600 text-white hover:bg-lime-700 focus-visible:outline-lime-700 focus:outline-lime-700',
  ],
  [
    'base',
    'bg-neutral-600 text-white hover:bg-neutral-700 focus-visible:outline-neutral-700  focus:outline-neutral-700',
  ],
  [
    'red',
    'bg-red-600 text-white hover:bg-red-700 focus-visible:outline-red-700 focus:outline-red-700',
  ],
  [
    'white',
    'bg-white text-neutral-900 ring-1 ring-inset ring-neutral-300 hover:bg-neutral-50 focus-visible:outline-neutral-400 focus:outline-neutral-400',
  ],
]);

const disabledStyles = computed(() =>
  disabled ? ' opacity-50 cursor-not-allowed' : null
);

const styles = computed(
  () => `${style} ${colors.get(color)}${disabledStyles.value}`
);
</script>
<template>
  <component :is="href ? 'a' : 'button'" ref="element" :class="styles" v-bind="href ? { href } : { type }">
    <slot />
  </component>
</template>

2. 修正父组件的Ref类型 #

父组件中buttonRef应绑定组件实例类型，而非原生DOM元素，使用InstanceType获取组件的实例类型：

<script lang="ts" setup>
import Button from '@/components/Button.vue';
import { onMounted, ref } from 'vue';

const emit = defineEmits(['cancel', 'proceed']);

// 获取Button组件的实例类型
const buttonRef = ref<InstanceType<typeof Button> | null>(null);

onMounted(() => {
  buttonRef.value?.focus();
});
</script>

<template>
  <div>
    <!-- ... -->
    <div class="mt-6 grid grid-flow-row-dense grid-cols-2 gap-3">
      <Button ref="buttonRef" @click="emit('cancel')">Abort</Button>
      <Button color="red" @click="emit('proceed')">
        <slot name="button" />
      </Button>
    </div>
  </div>
</template>

（可选）更规范的Props默认值写法 #

使用Vue提供的withDefaults方法，直接在类型定义中绑定默认值，写法更简洁且类型更安全：

<script lang="ts" setup>
import { computed, ref } from 'vue';

const props = withDefaults(defineProps<{
  href?: string;
  type?: 'button' | 'submit' | 'reset';
  color?: string;
  disabled?: boolean;
}>(), {
  type: 'button',
  color: 'primary',
  disabled: false
});

const element = ref<HTMLElement | null>(null);

defineExpose({
  focus: () => {
    element.value?.focus();
  },
});

const style =
  'inline-flex justify-center rounded-sm shadow-sm px-3 py-2 text-sm font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus:outline focus:outline-2 focus:outline-offset-2';

const colors = new Map([
  [
    'primary',
    'bg-lime-600 text-white hover:bg-lime-700 focus-visible:outline-lime-700 focus:outline-lime-700',
  ],
  [
    'base',
    'bg-neutral-600 text-white hover:bg-neutral-700 focus-visible:outline-neutral-700  focus:outline-neutral-700',
  ],
  [
    'red',
    'bg-red-600 text-white hover:bg-red-700 focus-visible:outline-red-700 focus:outline-red-700',
  ],
  [
    'white',
    'bg-white text-neutral-900 ring-1 ring-inset ring-neutral-300 hover:bg-neutral-50 focus-visible:outline-neutral-400 focus:outline-neutral-400',
  ],
]);

const disabledStyles = computed(() =>
  props.disabled ? ' opacity-50 cursor-not-allowed' : null
);

const styles = computed(
  () => `${style} ${colors.get(props.color)}${disabledStyles.value}`
);
</script>

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