TypeScript疑问：为何if判断后对象可选属性仍被视为可选类型？

问题原因 #

TypeScript的类型窄化规则对对象属性和独立变量的处理逻辑不同：

• 针对对象属性，if (obj.test)的类型窄化仅在同步、直接访问的代码片段中有效。因为obj是const声明的对象，但它的属性值依然可以被修改（const仅限制对象引用不可变，不限制内部属性），TypeScript无法保证延迟执行的代码（比如箭头函数）调用时，obj.test没有被改成undefined，因此会恢复其原始的string | undefined类型，导致传入testFunc时类型不匹配。
• 解构得到的独立const变量，一旦赋值后就无法被修改，TypeScript可以确定它的类型始终是string，所以在箭头函数中使用不会报错。

代码分析 #

1. 执行if (obj.test)时，TypeScript会在当前同步代码块内临时将obj.test窄化为string，但这个窄化效果无法覆盖延迟执行的箭头函数。
2. 箭头函数属于异步/延迟执行逻辑，TypeScript无法预判其执行时obj.test的状态，因此会使用属性的原始可选类型。
3. const { test } = obj将属性值赋值给独立变量，变量的不可变性让TypeScript能确定其类型稳定。

解决办法 #

• 方法一：使用解构变量（你已经采用的有效方式）
• 方法二：将对象属性设为只读，消除属性被修改的可能：

interface IObj {
  readonly test?: string;
}

const obj: IObj = {
  test: "why does this not work?",
};

if (obj.test) {
  () => testFunc(obj.test); // 不再报错
}

或者用as const断言锁定对象类型：

const obj = {
  test: "why does this not work?",
} as const;

if (obj.test) {
  () => testFunc(obj.test); // 类型匹配
}

• 方法三：非空断言（仅在你能确保属性值不会被修改时使用）：

() => testFunc(obj.test!); 

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