Vue+TypeScript项目调用window.open后document.write报null错误如何解决

TypeScript 提示 WinPrint 可能为 null 是因为 window.open 方法本身存在返回空值的场景：当浏览器拦截弹窗、传入参数非法、浏览器配置禁止站点弹窗时，window.open 都会返回 null。TS 内置的类型定义已经提前标注了该返回值可能性，因此直接调用 WinPrint.document.write 会触发类型校验报错。
报错截图如下：

• 方案1：空值校验兜底（优先推荐）
  先判断返回值是否存在，再执行后续操作，同时可以兼容弹窗被拦截的场景给用户提示，代码示例：

  const WinPrint = window.open(/* 你原本的open参数 */)
  if (WinPrint) {
    WinPrint.document.write(`<!DOCTYPE html>
    <!-- 你的完整HTML代码内容 -->
    `)
    // 其余所有对WinPrint的操作都放在该判断块内
    WinPrint.document.close()
    WinPrint.focus()
    WinPrint.print()
    WinPrint.close()
  } else {
    // 可选：给用户友好提示
    alert('弹窗被浏览器拦截，请允许本站点弹窗后重试')
  }
  

• 方案2：非空断言（仅适用于可100%确认不会返回空的场景）
  如果你能确定弹窗不会被拦截（比如操作是在用户主动点击的事件回调中触发，浏览器默认不会拦截这类用户交互触发的弹窗），可以使用 TS 提供的非空断言操作符 ! 告诉类型校验器你确认该值一定不为空，跳过校验，代码示例：

  // 变量末尾加!代表非空断言
  const WinPrint = window.open(/* 你原本的open参数 */)!
  WinPrint.document.write(`<!DOCTYPE html> ....`)
  

注意：非空断言仅跳过类型校验，不会改变实际运行逻辑，如果你断言后实际返回了null，运行时依然会抛出异常，因此优先选择方案1。

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