Destructuring a possibly `undefined` object not caught, throws an error at runtime

[bengry]

🔎 Search Terms

destructuring, Cannot destructure as it is undefined, optional chaining destructuring

🕗 Version & Regression Information

• This changed between versions ______ and _______
• This changed in commit or PR _______
• This is the behavior in every version I tried, and I reviewed the FAQ for entries about _________
• I was unable to test this on prior versions because _______

⏯ Playground Link

https://www.typescriptlang.org/play/?ts=5.6.2#code/MYewdgzgLgBAlmADgVygLhgbwLACgYEwCGA-BpjAEZlYzAbQBOCA5jAL4d6cC8tRGZGAAmAUwBmCUcK648oSLAoA6VZQ4w+CFFGWlllIA

💻 Code

const input: {
    a?: { b?: { c: string } }
} = { a: undefined }

const { ...b } = input.a?.b

🙁 Actual behavior

No error reported by TypeScript.

🙂 Expected behavior

TypeScript should have an indicative error, since this expression might result in undefined, which cannot be destructured.

Similar to this:

Rest types may only be created from object types.(2700)

Additional information about the issue

The error in the JavaScript being ran is:

Uncaught TypeError: Cannot destructure '(intermediate value)' as it is undefined.

[MartinJohns]

@Andarist Does your PR #60121 fix this as well?

[Andarist]

Yes :) c0ef609

[chernodub]

For those looking how to find and prevent that in their codebase until the PR merged. I've figured a custom eslint rule to prevent such cases and avoid runtime failure:

The rule:

import { AST_NODE_TYPES, ESLintUtils } from '@typescript-eslint/utils';
import ts from 'typescript';

const createRule = ESLintUtils.RuleCreator(() => import.meta.filename);

const MESSAGE_ID = 'noNullableSpread';
export default createRule({
    name: 'no-nullable-spread-destructuring',
    meta: {
        type: 'problem',
        docs: {
            description: 'Disallow spread destructuring on nullable objects',
        },
        schema: [],
        messages: {
            [MESSAGE_ID]:
                'Spread destructuring is not allowed for nullable objects ({{type}}). ' +
                'Use explicit destructuring or ensure the object is not null/undefined.',
        },
    },
    defaultOptions: [],
    create(context) {
        const services = ESLintUtils.getParserServices(context);
        const checker = services.program.getTypeChecker();

        /**
         * @param {import('@typescript-eslint/utils').TSESTree.ObjectPattern} pattern
         * @param {import('@typescript-eslint/utils').TSESTree.Node} sourceNode
         */
        function checkObjectPattern(pattern, sourceNode) {
            // Only check if there's a rest element
            if (!pattern.properties.some((prop) => prop.type === 'RestElement')) {
                return;
            }

            const tsNode = services.esTreeNodeToTSNodeMap.get(sourceNode);
            const type = checker.getTypeAtLocation(tsNode);

            if (isNullableType(type)) {
                const restElement = pattern.properties.find((prop) => prop.type === 'RestElement');
                context.report({
                    node: restElement,
                    messageId: MESSAGE_ID,
                    data: { type: checker.typeToString(type) },
                });
            }
        }

        return {
            VariableDeclarator(node) {
                if (node.id.type === AST_NODE_TYPES.ObjectPattern && node.init) {
                    checkObjectPattern(node.id, node.init);
                }
            },

            AssignmentExpression(node) {
                if (node.left.type === AST_NODE_TYPES.ObjectPattern) {
                    checkObjectPattern(node.left, node.right);
                }
            },
        };
    },
});

/** @param {import('typescript').Type} type */
function isNullableType(type) {
    if (type.flags & (ts.TypeFlags.Null | ts.TypeFlags.Undefined)) {
        return true;
    }

    if (type.isUnion()) {
        return type.types.some((t) => t.flags & (ts.TypeFlags.Null | ts.TypeFlags.Undefined));
    }

    return false;
}

Follow the guide on how to enable this rule for your workspace: https://eslint.org/docs/latest/extend/custom-rules

OR, you could just forbid any spread destructuring (including non-nullable sources):

'no-restricted-syntax': [
    'error',
    {
        selector:
            'VariableDeclarator[id.type="ObjectPattern"][id.properties.length>0] > ObjectPattern > RestElement',
        message:
            'Spread destructuring is not allowed for potentially nullable objects. Use explicit destructuring or ensure the object is not null/undefined before destructuring.',
    },
    {
        selector:
            'AssignmentExpression[left.type="ObjectPattern"][left.properties.length>0] > ObjectPattern > RestElement',
        message:
            'Spread destructuring is not allowed for potentially nullable objects. Use explicit destructuring or ensure the object is not null/undefined before destructuring.',
    },
],

Examples:

function getData(): { data: 123 } | undefined {
    return undefined;
}

const { ...rest } = getData();
//      ^ eslint will yell at you here

if ({...rest} = getData()) {
//   ^ and here
}