如何结合解构赋值和可选链接？答案

【问题标题】：How can I combine destructuring assignment and optional chaining?如何结合解构赋值和可选链接？
【发布时间】：2020-03-10 23:40:55
【问题描述】：

我有一个带有一些可选字段和该类型变量的 TypeScript 接口：

interface Foo {
    config?: {
        longFieldName?: string;
    }
}

declare let f: Foo;

我想将longFieldName 放入同名变量中。

如果config 不是可选的，我会使用destructuring assignment 来执行此操作，而无需重复longFieldName。但它是，所以我得到一个类型错误：

const { longFieldName } = f.config;
     // ~~~~~~~~~~~~~  Property 'longFieldName' does not exist on type '{ longFieldName?: string | undefined; } | undefined'.

我可以使用optional chaining简洁地处理undefined的情况：

const longFieldName = f?.config.longFieldName;  // OK, type is string | undefined

但现在我必须重复longFieldName。

我的蛋糕也可以吃吗？我可以使用可选链接来处理undefined 的情况而不重复longFieldName 吗？如果不是，最简洁/惯用的解决方法是什么？见playground link。

【问题讨论】：

目前超出 ecma t39 的范围：github.com/tc39/proposal-optional-chaining/issues/74

标签： javascript typescript optional-chaining

【解决方案1】：

如果f?.config 表达式的计算结果为undefined，则使用short circuit evaluation 获取备用值（空对象）：

const { longFieldName } = f?.config || {};

【讨论】：

这就是解决方法。但是有没有更类似于可选链接的东西？（我认为您不希望在 longFieldName 之前使用 ...。）
... 是多余的。据我所知，可选链接不处理回退。 ... 是另一个解决方案的剩余部分 - 将 f?.config 传播到对象 { ...f?.config } 中。如果链接计算结果为 undefined 或 null，它们将被传播忽略。
这对我不起作用。我得到undefined is not an object (evaluating '_ref2.longFieldName')。
对于仅在右侧的一个属性，也可以这样做：const { longFieldName = "" } = f ?? {}，带有可选（如我插入的）后备值
这是我通常做的，但它困扰我，我希望ECMA可以采用const { longFieldName } = f?.config?;github.com/tc39/proposal-optional-chaining/issues/74

【解决方案2】：

您可以使用默认值。

const Foo = {}
const { config: { longFieldName = "" } = {} } = Foo
console.log(longFieldName) //''

【讨论】：

如果缺少config，这确实有效，但如果您添加另一个同样缺少的中间级别，它将无法正常工作。