Typescript 中可选道具的解构

Question

假设我有带有这种形状的可选道具的对象

interface MyObject {
  requiredProp: SomeType;
  optionalProp?: { 
    innerData: {
      innerProp1: string;
      innerProp2: number;
      innerProp3?: boolean;
    }
  }
}

const obj:MyObject = { ... }

但我似乎不能轻易地解构optionalProp

const {innerProp1, innerProp2, innerProp3} = obj.optionalProp?.innerData;

因为

Property 'innerProp1' does not exist on type '... | undefined'.

其余的解构变量也一样。

有没有一种优雅而简短的方法来保持类型安全？

Answer 1

您可以使用空对象作为后备。

const {innerProp1, innerProp2, innerProp3} = obj.optionalProp?.innerData ?? {};

但你应该记得在使用之前检查每个 innerProp 是否未定义。

Answer 2

除了其他正确答案外，还可以通过其他几种方式解决这个问题...

1. 通过给定一个值，以便在 undefined 或 null
的情况下可以满足解构

const { innerProp1, innerProp2, innerProp3 } = obj.optionalProp?.innerData || {};

2. 通过在解构之前对 optionalProp 进行 null-ness 检查。

if (obj.optionalProp) {
    const { innerProp1, innerProp2, innerProp3 } = obj.optionalProp?.innerData;
}

---

WYSIWYG => WHAT YOU SHOW IS WHAT YOU GET