TypeScript中无法安全缩小深层嵌套对象属性类型的问题

我尝试以类型安全的方式从第一个错误中获取message属性：

// 实际场景中该数据由后端返回
const mutationError: unknown = {
    sources: {
        errors: [
            {
                message: 'Hello from error message'
            }
        ]
    }
};

const sources = (
    typeof mutationError === 'object'
    && mutationError
    && 'sources' in mutationError
    && typeof mutationError.sources === 'object'
    && mutationError.sources
);

// "sources" 的类型为 "false | object | null"

const errors = (
    typeof sources === 'object'
    && sources
    && 'errors' in sources
    && Array.isArray(sources.errors)
    && sources.errors
);

// "errors" 的类型为 "false | any[] | null"

const firstError = errors && errors[0];

// "firstError" 的类型为 "any"

const message = (
    typeof firstError === 'object'
    && firstError
    && 'message' in firstError
    && typeof firstError.message === 'string'
    && firstError.message
);

但最终message的类型仍为any，无法实现预期的类型安全，请问哪里操作有误？

问题原因 #

核心问题出在errors的类型推断上：它被判定为false | any[] | null。当你访问errors[0]时，由于数组是any[]类型，取出的firstError会被推断为any。而TypeScript对any类型的类型窄化逻辑是失效的——any会“穿透”所有后续的类型检查，导致最终message的类型依然是any。

解决方案 #

要实现类型安全，需要避免数组被推断为any[]，而是通过类型守卫或分步窄明确认数组元素的结构。以下是几种可行方案：

方案1：自定义类型守卫函数 #

先定义明确的类型结构，再通过类型守卫验证数据：

interface ErrorItem {
    message: string;
}

interface ErrorSources {
    errors: ErrorItem[];
}

function isErrorSources(obj: unknown): obj is ErrorSources {
    return (
        typeof obj === 'object'
        && obj !== null
        && 'errors' in obj
        && Array.isArray(obj.errors)
        && obj.errors.every(item => 
            typeof item === 'object'
            && item !== null
            && 'message' in item
            && typeof item.message === 'string'
        )
    );
}

// 重构后的取值逻辑
const message = (() => {
    if (typeof mutationError !== 'object' || mutationError === null) return undefined;
    if (!('sources' in mutationError)) return undefined;
    const sources = mutationError.sources;
    if (!isErrorSources(sources)) return undefined;
    return sources.errors[0]?.message;
})();

此时message的类型会被正确推断为string | undefined，完全符合类型安全要求。

方案2：分步块级窄化类型 #

通过块级作用域的条件判断，让TypeScript逐步窄化每个变量的类型：

const sources = (
    typeof mutationError === 'object'
    && mutationError
    && 'sources' in mutationError
    && typeof mutationError.sources === 'object'
    && mutationError.sources
);

let message: string | undefined;

if (sources && typeof sources === 'object' && 'errors' in sources) {
    const errors = sources.errors;
    if (Array.isArray(errors) && errors.length > 0) {
        const firstError = errors[0];
        if (typeof firstError === 'object' && firstError !== null && 'message' in firstError && typeof firstError.message === 'string') {
            message = firstError.message;
        }
    }
}

这种方式下，TypeScript能在每个条件块内正确推断变量类型，最终message的类型为string | undefined。

方案3：类型断言结合可选链（适用于数据结构稳定场景） #

如果能确保后端返回的数据结构完全符合预期，可以用类型断言快速处理（注意：若实际数据结构不符，运行时可能出错）：

interface ErrorResponse {
    sources: {
        errors: Array<{ message: string }>;
    };
}

const message = (mutationError as ErrorResponse)?.sources?.errors?.[0]?.message;

此时message的类型为string | undefined，代码简洁但安全性依赖数据结构的稳定性。

内容的提问来源于stack exchange，提问作者Camilo