Vue 3 TypeScript 可选道具对象检查长度 - 错误

【问题标题】：Vue 3 TypeScript optional props object checking length - errorVue 3 TypeScript 可选道具对象检查长度 - 错误
【发布时间】：2022-09-26 15:57:07
【问题描述】：

我需要道具是一个可选的对象。

interface MyObject { id: string| number, name: string, namePlural: string}
interface Props { preloadInputs?: MyObject}

... // 检查 preloadInputs 是否不为空：

onMounted(() => {if (!(Object.keys(props.preloadInputs).length === 0)) {...} })

VSCode 的错误props.preloadInputs是：

我收到一个错误：

没有重载匹配此调用重载 1 of 2，\' (o: {}): string[]\'，给出了以下错误。重载 2 of 2, \' (o: object): string[]\', 给出以下错误.ts (2769)

我是 Vue 和 TS 的新手，所以一定有一些我遗漏的东西。

【解决方案1】：

您将preloadInputs 定义为可选的，因此它可以具有undefined 的值。 Object.keys() 不接受 undefined 作为参数。这就是您收到错误Type 'undefined' is not assignable to type '{}' 的原因。

我们可以使用nullish coalescing 运算符来解决这个问题。

Object.keys(props.preloadInputs ?? {}).length === 0

如果props.preloadInputs 是undefined，则将一个空对象传递给Object.keys()。

【讨论】：