How can I combine destructuring assignment and optional chaining?

Question

I have a TypeScript interface with some optional fields and a variable of that type:

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

declare let f: Foo;

I'd like to put longFieldName in a variable of the same name.

If config weren't optional, I'd use destructuring assignment to do this without repeating longFieldName. But it is, so I get a type error:

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

I can use optional chaining to concisely handle the undefined case:

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

But now I have to repeat longFieldName.

Can I have my cake and eat it, too? Can I use optional chaining to handle the undefined case without repeating longFieldName? If not, what is the most concise/idiomatic workaround? See playground link.

Answer 1

Use short circuit evaluation to get a fallback value (empty object) if the f?.config expression evaluate to undefined:

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