TypeScript中如何正确指定Node.childNodes变量的类型？

原始代码片段 #

const myElem: HTMLElement | null = document.getElementById("asd");
let arrow: any = [];

if (myElem) {
  arrow = myElem.childNodes;
  arrow[1].style.display = "none";
  arrow[2].style.display = "block";
}

尝试修改后的问题 #

尝试替换any类型并提前初始化变量，代码如下：

let arrow: HTMLCollectionOf<HTMLElement> = [];

arrow = myElem.childNodes as HTMLCollectionOf<HTMLElement>;

但触发了两个TypeScript错误：

error TS2739: Type 'never[]' is missing the following properties from type 'HTMLCollectionOf<HTMLElement>': item, namedItem
error TS2352: Conversion of type 'NodeListOf<ChildNode>' to type 'HTMLCollectionOf<HTMLElement>' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Property 'namedItem' is missing in type 'NodeListOf<ChildNode>' but required in type 'HTMLCollectionOf<HTMLElement>'.

问题根源 #

1. 类型不匹配：childNodes返回的是NodeListOf<ChildNode>（包含元素、文本、注释等所有节点类型），而HTMLCollectionOf<HTMLElement>是仅包含元素节点的集合，二者结构和类型完全不兼容，强行断言会触发错误。
2. 初始化错误：数组[]和DOM集合类型（NodeList/HTMLCollection）不是同一类型，不能直接赋值作为初始值。

正确解决方案 #

方案1：使用NodeList正确类型并处理节点断言 #

保留childNodes，但用正确的NodeListOf<ChildNode>类型，访问元素时断言为HTMLElement确保可以操作style：

const myElem: HTMLElement | null = document.getElementById("asd");
// 用null初始化，符合变量未赋值时的状态
let arrow: NodeListOf<ChildNode> | null = null;

if (myElem) {
  arrow = myElem.childNodes;
  // 断言节点为HTMLElement，避免类型错误
  (arrow[1] as HTMLElement).style.display = "none";
  (arrow[2] as HTMLElement).style.display = "block";
}

方案2：改用children获取纯元素集合（推荐） #

如果只需要操作元素节点，直接用children属性，它返回HTMLCollectionOf<HTMLElement>，无需额外断言：

const myElem: HTMLElement | null = document.getElementById("asd");
let arrow: HTMLCollectionOf<HTMLElement> | null = null;

if (myElem) {
  arrow = myElem.children;
  arrow[1].style.display = "none";
  arrow[2].style.display = "block";
}

方案3：初始化空的DOM集合 #

如果要求变量必须初始化非null值，可以用空的NodeList作为默认值：

const myElem: HTMLElement | null = document.getElementById("asd");
// 创建空的DocumentFragment获取空NodeList
let arrow: NodeListOf<ChildNode> = document.createDocumentFragment().childNodes;

if (myElem) {
  arrow = myElem.childNodes;
  (arrow[1] as HTMLElement).style.display = "none";
  (arrow[2] as HTMLElement).style.display = "block";
}

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