Typescript 中可选道具的解构

Question

假设我有 object 和这种形状的可选道具

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

const obj:MyObject = { ... }

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

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

因为

类型“...”上不存在属性“innerProp1” 不明确的'。

与解构变量的 rest 相同。

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

Answer 1

您可以使用空的 object 作为后备。

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;
}