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

因为

类型“... | undefined”的属性“innerProp1”不存在。

其他解构变量也是一样。

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

- Sergei Klinov

---

只需提供一个备用方案：obj.optionalProp?.innerData ?? {}。 - VLAZ

Answer 1

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

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

但是您需要记住，在使用每个innerProp之前，请检查其是否未定义。

- Mirco Bellagamba

Answer 2

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

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

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

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

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

- Nalin Ranjan

---

在内部块中定义innerProps{1,2,3}的方式存在问题，仅当obj.optionalProp不为空时才会出现问题。因此，这对周围使用情况做了相当多的假设。我认为你应该使用问号运算符代替： const {innerProp1, innerProp2, innerProp3 } = obj.optionalProp ? obj.optionalProp?.innerData : {}; - FooF

但是，使用 || 或 ?? 运算符更简洁的 TS/JS 只需要一个小小的跳跃。 - FooF

@FooF，由于在另一个答案中已经使用了 ??，所以这次我想用也可以正常工作的 ||，即使是在较低/旧版本的TS/JS中也适用。对于第二个问题，确实是 块范围，但讨论的重点是涉及到 可为空 变量的 解构赋值。因此，“...这也可以用几种其他方式来解决...”。 - Nalin Ranjan