TypeScript中如何正确赋值当前窗口DOM对象？类型不匹配问题求解

你遇到的错误核心是类型不匹配：document.defaultView返回的是Window类型的对象（当前浏览器窗口实例），而你声明的DOM_obj变量是HTMLElement类型（DOM元素节点），这两个类型的属性、方法完全不同，所以TypeScript会抛出类型不兼容的错误。

接下来根据你的实际需求，给出两种正确的处理方式：

情况1：你确实需要获取当前窗口对象 #

如果你的目标是拿到当前浏览器窗口的Window对象，只需要把变量的类型改成Window或者Window | null（考虑到document.defaultView在极少数场景下可能返回null，比如无窗口关联的独立文档）：

// 允许null的安全写法
protected DOM_obj: Window | null;
DOM_obj = document.defaultView;

// 如果你能确保defaultView不会为null，可用非空断言简化
protected DOM_obj: Window;
DOM_obj = document.defaultView!;

情况2：你实际想获取页面的根DOM元素 #

如果你的本意是获取页面中的某个DOM元素（比如根节点<html>或<body>），那应该使用对应的DOM API，而不是document.defaultView：

• 获取<html>根元素（类型是确定的HTMLElement）：

  protected rootElement: HTMLElement;
  rootElement = document.documentElement;
  

• 获取<body>元素（注意body在极端场景下可能为null，建议处理空值）：

  // 安全写法，允许null
  protected bodyElement: HTMLBodyElement | null;
  bodyElement = document.body;
  
  // 确定页面存在body时，用非空断言简化
  protected bodyElement: HTMLBodyElement;
  bodyElement = document.body!;
  

内容的提问来源于stack exchange，提问作者Mussé Redi