Typescript,'NodeListOf<element> ' 不是数组类型或字符串类型</element>

Question

将我的 JS 转换为 TS 严格模式。

以下语法对我来说看起来不错，但 TS 在allSubMenus的for循环中抱怨：

[ts] Type 'NodeListOf<Element>' is not an array type or a string type.

我错过了什么？

function subAct(target:Node){

  const allSubMenus : NodeListOf<Element> = document.querySelectorAll('.subMenuItems') 

  for (const sub of allSubMenus){
    sub.classList.remove('active')
  }  
}

Answer 1

这是打字稿侧解析错误。 我对 HTMLCollectionOf 有同样的问题

让它为已任，它为我工作

  const allSubMenus : NodeListOf<Element> = document.querySelectorAll('.subMenuItems') 

  for (const sub of allSubMenus as any){ // then will pass compiler
    sub.classList.remove('active')
  }  

Answer 2

您需要将target编译器选项设置为es6或更高版本，以便NodeListOf<T>可迭代。

Answer 3

你可以试试

const allSubMenus : NodeListOf<Element> = document.querySelectorAll('.subMenuItems') 
Array.from(allSubMenus, subMenu => {/* */})

Answer 4

在tsconfig.json文件的 compilerOptions 中设置"downlevelIteration": true 。

来自https://www.typescriptlang.org/tsconfig#downlevelIteration

Downleveling 是 TypeScript 的术语，用于转换为旧版本的 JavaScript。 此标志是为了支持更准确地实现现代 JavaScript 如何迭代旧 JavaScript 运行时中的新概念

Answer 5

您可以使用forEach方法迭代NodeListOf 。

const allSubMenus : NodeListOf<Element> = document.querySelectorAll('.subMenuItems') 
allSubMenus.forEach(sub => sub.classList.remove('active'))

来源： https : //microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_typedoc_node_modules_typescript_lib_lib_dom_d_.nodelistof.html#foreach

Answer 6

在编译代码时，您可以选择target: ES2017或target: ES2015 。 您也可以在tsconfig.json文件 unser compilerOptions设置此属性。

所以这是它的命令行代码：

npx tsc path/to/file.ts --target ES2015

提示：如果您将 babel 与 typescript 一起使用，则完全建议您始终将 typescript 编译为最新版本的 Javascript，然后让 babel 处理其余的过程。 使用这种技术，您可以为旧浏览器添加另一个支持级别的保证，因为 typescript 无法编译将在例如 ie6 中运行的代码； 所以 babel 来拯救这里，让你确保你的js代码甚至可以在 ie < 9 中运行，它有帮助的 polyfills 和其他需要工作的机制！

所以请记住：

始终让 typescript 将您的代码编译为最新的 javascript（通过设置target: ES2017 ）并让 babel 转译您的 js 代码以支持旧浏览器（正确分离关注点并让每个人完成相关工作）。

Answer 7

这假设您想要保留 ES5 目标（如果没有，将其升级到 ES6 也将解决该问题）。

1. 使用for循环

function subAct(target:Node){
  const allSubMenus = document.querySelectorAll('.subMenuItems');

  for (let i = 0; i < allSubMenus.length; i += 1){
    const sub = allSubMenus[i];
    sub.classList.remove('active')
  }  
}

2. 使用Array.from

为了使用它，您必须将ES2015.core添加到compilerOptions.lib并为Array.prototype.from添加 polyfill 请注意，这将在集合上循环两次 - 第一种方法更好。

function subAct(target:Node){
  const allSubMenus = Array.from(document.querySelectorAll('.subMenuItems'));

  for (const sub of allSubMenus){
    sub.classList.remove('active')
  }  
}