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

Question

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

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

declare let f: Foo;

我想放入longFieldName一个同名的变量。

如果config不是可选的，我会使用解构赋值来做到这一点而不重复longFieldName. 但确实如此，所以我收到了一个类型错误：

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

我可以使用可选链接来简洁地处理这种undefined情况：

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

但现在我要重复一遍longFieldName。

我可以吃蛋糕也吃吗？我可以使用可选链来处理这种undefined情况而不重复longFieldName吗？如果没有，最简洁/惯用的解决方法是什么？请参阅游乐场链接。

Answer 1

如果表达式计算为 ，则使用短路计算来获取回退值（空对象）：f?.configundefined

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

Answer 2

您可以使用默认值。

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