Vue3 TypeScript可选Props对象长度检查报错求助

问题根源 #

你定义的preloadInputs是可选属性，TypeScript推断它的类型为MyObject | undefined。而Object.keys()的参数必须是确定存在的对象（不能是undefined），直接传入props.preloadInputs时，TS无法确保它不是undefined，因此抛出类型不匹配的错误（TS2769）。

解决方法 #

你需要先排除preloadInputs为undefined的情况，再检查对象是否为空，以下是几种可行的写法：

写法一：先判断存在性，再检查空对象

onMounted(() => {
  // 先确认preloadInputs存在，再判断是否非空
  if (props.preloadInputs && Object.keys(props.preloadInputs).length > 0) {
    // 这里写你的业务逻辑
  }
})

写法二：明确排除undefined（类型守卫）

onMounted(() => {
  if (props.preloadInputs !== undefined) {
    // 此时TS能确定preloadInputs是MyObject类型，可安全调用Object.keys
    if (Object.keys(props.preloadInputs).length > 0) {
      // 业务逻辑
    }
  }
})

写法三：用空值合并运算符兜底

如果希望preloadInputs为undefined时直接按空对象处理，可以用??运算符提供默认值：

onMounted(() => {
  if (Object.keys(props.preloadInputs ?? {}).length > 0) {
    // 业务逻辑
  }
})

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