TypeScript Error - Type NodeListOf<Element> ; must have a Symbol.iterator() method that returns an iterator
Table of Contents
Related to:: TypeScript
main.ts:3 ⛔️ error TS2488: Type 'NodeListOf<Element>' must have a '[Symbol.iterator]()' method that returns an iterator.
To illustrate the error, consider the following code from my Obsidian Plugin:
main.ts
let pre = document.querySelectorAll("pre:not(.frontmatter)");
val.plugins.commandLine.resizeElements(
[...pre].filter(i => i.classList.contains('command-line'))
);
In this code, the val.plugins.commandLine.resizeElements
function is used to resize an array of elements that have the class command-line
. However, the error is thrown when attempting to iterate over the querySelectorAll
response.
Solution
To solve this problem, simply add "DOM.Iterable"
to your lib
property on tsconfig.json
as shown below:
Example of tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"inlineSourceMap": true,
"inlineSources": true,
"module": "ESNext",
"target": "ES6",
"allowJs": true,
"noImplicitAny": true,
"moduleResolution": "node",
"importHelpers": true,
"isolatedModules": true,
"strictNullChecks": true,
"lib": [
"DOM",
"DOM.Iterable",
"ES5",
"ES6",
"ES7"
]
},
"include": [
"**/*.ts"
]
}
In tsconfig.json
, the lib
property specifies the set of library files that are available to the TypeScript compiler. By adding "DOM.Iterable"
to this property, the necessary Type Declarations are made available to fix the error.”