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

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) //''