Vue3 script setup中withDefaults嵌套对象props属性必填问题解决

问题根源 #

当你用withDefaults给嵌套对象Props设置默认值时，TypeScript会因为默认值的存在，将原本可选的嵌套子属性推断为必填类型，导致父组件传入部分属性时触发类型错误。

解决方案 #

以下是几种可行的处理方式，根据你的代码习惯选择即可：

方案1：用Partial放宽嵌套属性的类型限制

将嵌套对象的基础接口设为必填，再通过Partial允许父组件传入部分属性：

// 定义完整的嵌套属性接口（子属性设为必填）
interface SearchBtnProps {
  text: string;
  icon: string;
  disabled: boolean;
}

// 父Props中用Partial让searchBtn接受部分属性
interface Props {
  searchBtn?: Partial<SearchBtnProps>;
}

// 设置默认值，提供完整的嵌套对象
const props = withDefaults(defineProps<Props>(), {
  searchBtn: () => ({
    text: '搜索',
    icon: 'search',
    disabled: false
  })
});

父组件传入searchBtn="{text: '查询'}"时，TypeScript会认可这种部分属性的传入方式。

方案2：组件内部合并默认值 + 类型断言

如果不想修改原有接口结构，可以在组件内部手动合并传入值与默认值，同时用类型断言绕过TS的严格校验：

interface SearchBtnProps {
  text?: string;
  icon?: string;
  disabled?: boolean;
}

interface Props {
  searchBtn?: SearchBtnProps;
}

// 单独定义默认值对象
const defaultSearchBtn = {
  text: '搜索',
  icon: 'search',
  disabled: false
};

// 用类型断言让TS接受部分属性传入
const props = withDefaults(
  defineProps<Props>() as { searchBtn?: Partial<SearchBtnProps> },
  {
    searchBtn: () => defaultSearchBtn
  }
);

// 组件内部使用时合并，确保拿到完整属性
const mergedSearchBtn = { ...defaultSearchBtn, ...props.searchBtn };

方案3：直接在defineProps中使用交叉类型

更简洁的写法，直接在defineProps的泛型里定义允许部分传入的类型：

interface SearchBtnProps {
  text: string;
  icon: string;
  disabled: boolean;
}

const props = withDefaults(defineProps<{
  searchBtn?: Partial<SearchBtnProps>;
}>(), {
  searchBtn: () => ({
    text: '搜索',
    icon: 'search',
    disabled: false
  })
});

内容的提问来源于stack exchange，提问作者林嘉裕