Nullish Coalescing运算符在TypeScript场景中失效问题求助

先看你的代码：

interface Day {
    dayNumber: number;
    color: string;
    isBooked: boolean;
}

const myDay: Day | 0 = {
    dayNumber: 12,
    color: "blue",
    isBooked: false,
}

const daysArray: (Day | 0)[] = [0, 0, 0, myDay]

for (let i=0; i<4; i++) {
    console.log(daysArray[i].dayNumber ?? 0)
    // Error: Property 'dayNumber' does not exist on type '0 | Day'.
}

报错原因 #

TypeScript对联合类型的属性访问有严格检查：只有当某个属性在所有联合类型成员上都存在时，才能直接访问。你的daysArray[i]是Day | 0类型，0是数字类型，没有dayNumber属性，所以直接访问这个属性会触发类型错误。

空值合并运算符??的作用是处理属性存在但值为null/undefined的场景，它无法解决“属性本身不存在”的类型问题——因为TypeScript在你访问属性的第一步就已经阻止了这个操作。

解决方法 #

方法1：使用类型守卫判断类型 #

先判断当前项是Day类型还是数字0，再分别处理：

// 自定义类型谓词，明确判断是否为Day类型
function isDay(item: Day | 0): item is Day {
    return typeof item === 'object' && item !== null && 'dayNumber' in item;
}

for (let i=0; i<4; i++) {
    const item = daysArray[i];
    console.log(isDay(item) ? item.dayNumber : 0);
}

或者用更简洁的typeof判断（因为0是数字类型，Day是对象类型）：

for (let i=0; i<4; i++) {
    const item = daysArray[i];
    console.log(typeof item === 'object' ? item.dayNumber : 0);
}

方法2：可选链+空值合并 #

用可选链?.处理属性不存在的情况，配合空值合并运算符返回默认值0：

for (let i=0; i<4; i++) {
    console.log(daysArray[i]?.dayNumber ?? 0);
}

可选链?.会在当前值不是对象/为null/undefined时返回undefined，此时空值合并运算符??会将undefined替换为0，同时TypeScript也会认可这种写法的类型安全性。

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