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

Question

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

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 .

Answer 1

使用short circuit evaluation如果 f?.config 则获取备用值(空对象)表达式计算为 undefined :

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