Question

将我的JS转换为TS严格模式（头痛不已哈哈）

以下语法对我来说似乎不错，但TS在for的{{1}}循环中抱怨：

allSubMenus

我想念什么

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

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).map(subMenu => {/* */})

Answer 4

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

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

<块引用>

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

Answer 5

您可以使用NodeListOf方法遍历forEach。

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 代码可以在甚至 <9 中运行，它有帮助的 polyfills 和其他需要工作的机制！

所以请记住：

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

Typescript，“ NodeListOf <element>”不是数组类型或字符串类型

6 个答案:

所以请记住：