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

Posted 2023-03-13

【中文标题】如何结合解构赋值和可选链接？

【英文标题】：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

【参考方案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，这确实有效，但如果您添加另一个同样缺少的中间级别，它将无法正常工作。