TypeScript中如何允许访问不存在的属性并将其视为undefined？

问题场景 #

给出以下代码示例：

declare const isDisabled: {reason: string} | false;
const disabledReason: string = isDisabled?.reason || '';

这段代码在JavaScript环境中可正常执行，但TypeScript会抛出错误：Property 'reason' does not exist on type 'false | { reason: string; }'。

需求是让TypeScript允许此类写法，同时在属性不存在时将reason视为undefined（符合JavaScript运行时行为），最终解析后的类型为string | undefined且代码可通过编译。

解决方案 #

方法1：使用类型断言兼容可选链 #

通过类型断言将联合类型转为包含可选reason属性的类型，让TypeScript认可可选链的访问：

declare const isDisabled: {reason: string} | false;
const disabledReason: string | undefined = (isDisabled as { reason?: string })?.reason;
// 若需要默认空字符串，可继续拼接逻辑，此时类型为string
const disabledReasonWithDefault: string = (isDisabled as { reason?: string })?.reason || '';

方法2：通过类型守卫缩小范围 #

先判断isDisabled不是false，再安全访问属性，或通过三元表达式明确返回值：

declare const isDisabled: {reason: string} | false;
// 类型缩小后直接访问，类型为string | undefined
const disabledReason: string | undefined = typeof isDisabled !== 'boolean' ? isDisabled.reason : undefined;
// 带默认值的写法，类型为string
const disabledReasonWithDefault: string = typeof isDisabled !== 'boolean' ? isDisabled.reason : '';

方法3：重构原始类型定义（推荐，若可修改） #

如果有权限修改isDisabled的类型定义，将false替换为undefined，这样可选链写法会被TypeScript原生支持，完全符合运行时行为：

// 修改类型定义
declare const isDisabled: {reason: string} | undefined;
// 直接使用可选链，类型自动推导为string | undefined
const disabledReason: string | undefined = isDisabled?.reason;
// 带默认值则类型为string
const disabledReasonWithDefault: string = isDisabled?.reason || '';

方法4：利用逻辑与运算替代可选链 #

利用JavaScript的逻辑与特性，当isDisabled为false时直接返回对应值，再转为undefined或默认值：

declare const isDisabled: {reason: string} | false;
const disabledReason: string | undefined = isDisabled && isDisabled.reason || undefined;
// 带默认值
const disabledReasonWithDefault: string = isDisabled && isDisabled.reason || '';

内容的提问来源于stack exchange，提问作者Shachar Har-Shuv