TypeScript中使用document.querySelectorAll报错：NodeListOf<HTMLElement>非数组类型

Hey there! Let's figure out why you're running into that TypeScript error and go over the best ways to fix it.

When you call document.querySelectorAll<HTMLElement>(), it returns a NodeListOf<HTMLElement> object—not a native JavaScript array.

Even though modern NodeList instances have a forEach method and are iterable, TypeScript's type system draws a strict line between arrays and array-like DOM collections. The spread operator (...) expects an array type here, hence the error: "Type 'NodeListOf' is not an array type".

Here are three straightforward ways to resolve this:

1. Convert to an Array with Array.from() #

Array.from() is designed to turn array-like or iterable objects into proper arrays, and TypeScript fully supports this type conversion:

Array.from(document.querySelectorAll<HTMLElement>("#node-a input, #node-a button"))
  .forEach(item => {
    // Your logic here
  });

2. Use the Spread Operator with a Type Assertion #

If you prefer the spread syntax, you can use a type assertion to tell TypeScript the NodeList is iterable or an array of elements:

// Assert as an iterable (more accurate)
[...document.querySelectorAll<HTMLElement>("#node-a input, #node-a button") as Iterable<HTMLElement>]
  .forEach(item => {
    // Your logic here
  });

// Or assert directly as an array (simpler)
[...document.querySelectorAll<HTMLElement>("#node-a input, #node-a button") as HTMLElement[]]
  .forEach(item => {
    // Your logic here
  });

3. Use NodeList's Built-in forEach (No Conversion Needed!) #

You don't even need to convert to an array at all! Modern browsers implement forEach directly on NodeList, and TypeScript recognizes this method's type:

document.querySelectorAll<HTMLElement>("#node-a input, #node-a button")
  .forEach(item => {
    // Your logic here
  });

This is the cleanest approach if you don't need array-specific methods (like map, filter) beyond iteration.

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