严格模式下类型守卫赋值布尔值后无法识别的问题

你遇到的问题是：把!!this._iframe?.contentWindow的结果存到appLoaded变量后，用这个变量判断时访问this._iframe.contentWindow会报错，但直接在if条件里写原表达式就正常。

核心原因 #

TypeScript的类型守卫是基于当前代码上下文的静态分析，它只能直接追踪条件表达式里的逻辑对类型的影响：

• 当你直接在if里写!!this._iframe?.contentWindow时，TS能明确分析出：这个表达式为真意味着this._iframe肯定不是undefined，且contentWindow存在，所以会自动把this._iframe的类型从HTMLIFrameElement | undefined缩小为HTMLIFrameElement，此时访问contentWindow自然不会报错。
• 但你把判断结果存到appLoaded变量后，TS只知道这是个布尔值，无法把这个变量和this._iframe的状态关联起来——它不知道appLoaded为真代表this._iframe存在，所以不会缩小this._iframe的类型，访问this._iframe.contentWindow时就会因为this._iframe可能是undefined而报错。

可行的解决方案 #

1. 直接使用原表达式判断（就是你代码里的第二种写法）：

if(!!this._iframe?.contentWindow) {
    this._iframe.contentWindow.postMessage({}, '*');
}

2. 把实例属性存为局部变量再判断：
   TS能追踪局部变量的类型变化，所以可以先把this._iframe存到局部变量，再做判断：

const iframe = this._iframe;
if (iframe?.contentWindow) {
    iframe.contentWindow.postMessage({}, '*');
}

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