TypeScript可选对象属性访问报错：类型收窄失效问题咨询

报错场景代码 #

const FructusKey = {
    Apple: 'apple',
    Banana: 'banana',
} as const;
type FructusKey = (typeof FructusKey)[keyof typeof FructusKey];
type Fructus = {
    [FructusKey.Apple]: { count: number; cost: number },
    [FructusKey.Banana]?: { count: number; cost: number }
}
const fructus: Fructus = {
    [FructusKey.Apple]: { count: 0, cost: 100 },
}
if (fructus[FructusKey.Banana]) {
    const { count, cost } = fructus[FructusKey.Banana]; // 报错：Property 'cost' does not exist on type '{ count: number; cost: number; } | undefined'.(2339)
}

即便通过if检查了fructus[FructusKey.Banana]的存在性，TypeScript仍提示该值可能为undefined。

对比正常场景（使用enum） #

enum FructusKey {
    Apple = 'apple',
    Banana = 'banana',
};
type Fructus = {
    [FructusKey.Apple]: { count: number; cost: number },
    [FructusKey.Banana]?: { count: number; cost: number }
}
const fructus: Fructus = {
    [FructusKey.Apple]: { count: 0, cost: 100 },
}
if (fructus[FructusKey.Banana]) {
    const { count, cost } = fructus[FructusKey.Banana]; // 无报错
}

问题解答 #

1. 为何if检查后类型未收窄？ #

这是TypeScript控制流分析的局限性导致的：

• 当使用as const生成的字符串字面量类型作为对象索引时，TypeScript无法确定两次fructus[FructusKey.Banana]访问的是同一个属性（逻辑上是，但类型系统无法关联这两次访问的上下文）。
• 而enum的成员是独立的类型标识，TypeScript的控制流分析可以明确关联两次访问的是同一个属性，因此能正确收窄类型。

2. 如何安全访问属性？不止存入单独变量 #

有多种可行方案：

方案1：存入临时变量（最可靠推荐）

将属性值提前存入变量，让TypeScript能跟踪变量的类型收窄：

const bananaFruit = fructus[FructusKey.Banana];
if (bananaFruit) {
    const { count, cost } = bananaFruit;
}

方案2：使用非空断言（谨慎使用）

如果你能100%确定属性存在，可以用非空断言!跳过检查：

if (fructus[FructusKey.Banana]) {
    const { count, cost } = fructus[FructusKey.Banana]!;
}

方案3：重构类型为明确的字面量键

直接使用字符串字面量作为属性键，而非动态索引，TypeScript能正确识别可选属性的类型收窄：

type Fructus = {
    apple: { count: number; cost: number },
    banana?: { count: number; cost: number }
}
const fructus: Fructus = {
    apple: { count: 0, cost: 100 },
}
if (fructus.banana) {
    const { count, cost } = fructus.banana;
}

方案4：结合in操作符检查

通过in操作符确认属性存在后再做真值检查，部分场景下能触发类型收窄：

if (FructusKey.Banana in fructus && fructus[FructusKey.Banana]) {
    const { count, cost } = fructus[FructusKey.Banana];
}

可选属性处理最佳实践 #

• 优先用临时变量：动态索引场景下，将属性值存入临时变量是最稳妥的类型收窄方式，避免TypeScript分析失效。
• enum替代字符串字面量对象：如果需要使用动态索引键，优先选择enum，它能提供更好的控制流分析支持。
• 避免滥用类型断言：非空断言!会跳过TypeScript的类型检查，仅在你能绝对保证值存在时使用。
• 精确存在性检查：对于可选属性，优先用value !== undefined或value !== null做检查，避免真值检查误判空字符串、0等合法假值。

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