Typescript,'NodeListOf<Element>' 不是数组类型也不是字符串类型

Question

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

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

 [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')
  }
}

原文由 Sam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要将 target 编译器选项设置为 es6 或更高的 NodeListOf<T> 才能迭代。

原文由 Matt McCutchen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

根据您的打字稿目标编译器，可能会发生解析错误。

for-of 循环，在 EcmaScript (ES6) 第六版中引入。 因此，旧浏览器的 JS 引擎无法理解 for-of 循环 语法。 https://hacks.mozilla.org/2015/04/es6-in-depth-iterators-and-the-for-of-loop/

为了解决这个问题，

如果你只支持最新的现代浏览器（>=ES6）

更改您的 TS 目标

//tsconfig.json
{
  "compilerOptions": {
    "target": "es6" //above es6 like ES2015,ES2018 ...
  }
}

如果你支持旧浏览器(<=ES5)

我假设您正在使用下一个环境。

 //.tsconfig.json
{
  "compilerOptions": {
    "target": "es5"
  }
}

1. 要保持 for-of 循环，请使用 任何 语法

注意：“as any”会将 collection(Objects) 转换为数组，这会影响“for”范围内的某些类型特性。

 //.ts
const allSubMenus : NodeListOf<SpecifiedElement> = document.querySelectorAll('.subMenuItems')

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

上面的TS脚本会被编译成

//.js output
var allSubMenus = document.querySelectorAll('.subMenuItems');

for (var _a = 0, _b = forms; _a < _b.length; _a++) {
    var sub = _b[_a];
    sub.classList.remove('active');
}

https://stackblitz.com/edit/node-ywn1bq?file=main.js

1. 使用经典的 for 循环语法

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

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

---

<元素>

除了上述之外，为了避免以下警告，

 Property '<property name>' does not exist on type 'Element'

如果您知道元素类型和类型定义存在，则可以指定 。

 //for example,
NodeListOf<Element>  => NodeListOf<HTMLFormElement>

---

ECMAScript(ES) 历史

https://codeburst.io/javascript-wtf-is-es6-es8-es-2017-ecmascript-dca859e4821c

原文由 John 发布，翻译遵循 CC BY-SA 4.0 许可协议