TS配置ES2018+ES6库时，for与for-of循环的TSLint冲突问题咨询

这不是bug，是你遗漏了关键的TypeScript配置项，或者可以通过代码转换来解决，下面分两种思路给你方案：

原因解析 #

document.querySelectorAll()返回的NodeListOf<Element>本身在现代浏览器（支持ES2015+ DOM规范）中是可迭代的，但TypeScript的类型检查需要明确知道这一点——你的tsconfig.json里只指定了lib: ["ES6"]，缺少了DOM相关的迭代器类型定义，所以TS编译器识别不到NodeList的[Symbol.iterator]方法，而TSLint又强制要求使用for-of循环，就出现了这个矛盾。

方案1：修改tsconfig.json配置 #

在compilerOptions.lib中添加DOM和DOM.Iterable，让TypeScript加载DOM迭代器的类型定义：

{
  "compilerOptions": {
    "target": "es2018",
    "lib": ["ES6", "DOM", "DOM.Iterable"]
  }
}

修改后，TypeScript就能正确识别NodeList是可迭代对象，for-of循环的TS错误会消失，同时也符合TSLint的规则要求。

方案2：将NodeList转换为数组 #

如果暂时不想修改配置，或者需要兼容一些不支持NodeList迭代的旧环境，可以把NodeList转换成数组后再用for-of循环：

// 方法1：使用Array.from
const noTab = Array.from(document.querySelectorAll('button'));
// 方法2：使用扩展运算符
const noTab = [...document.querySelectorAll('button')];

// 现在可以正常用for-of了
for (let el of noTab) {
  el.setAttribute('tabindex', "-1");
}

这种方式也能同时满足TSLint和TypeScript的要求，而且数组的迭代行为是TypeScript默认就支持的。

额外提示 #

如果你的项目需要兼容旧浏览器（比如IE11），即使修改了TS配置，运行时还是会因为NodeList没有迭代器而报错，这时候方案2的数组转换就更稳妥，或者你需要引入core-js之类的polyfill来补上NodeList的迭代器方法。

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